谷歌地圖只加載一次在遠程服務器，每次加載本地主機

Question

我有一個服務器，我用谷歌地圖託管我的網頁。它工作正常，每次在本地加載地圖。但是，當我將應用程序託管在實際的Web服務器中時，屏幕顯示一個空白的灰色屏幕，鼠標指針就像它在Google地圖中的樣子（就像在地圖上拖動的手掌，因此映射負載，只有地點和標記不顯示）。

但偶爾，即使它託管的遠程Web服務器也會顯示帶有標記的應用程序。但是每次在localhost中加載。我用console.log來顯示座標，並且座標看起來應該是這樣。

我與JS代碼的html：

<script> 
    var locationArray,latArray=[],lngArray=[],contentStringArray=[],contentString=[],deviceId=[],data,deviceIdLoopCount=2; 
    var marker=[];var test="a"; 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState == 4) { 
      data = JSON.parse(xhr.responseText); 
      for(i=0;i<data.length;i++) 
      { 
       if(!(i+1)%3==0){ 
        latArray.push(data[i]); 
        lngArray.push(data[i+1]); 
        i=i+2; 
        deviceId.push(data[deviceIdLoopCount]); 
        console.log(deviceId); 
        console.log(latArray); 
        deviceIdLoopCount+=3; 
       } 
      } 

     } 
    } 

    xhr.open('POST', 'GetLocationFromDB', true); 
    xhr.send(); 
    function initMap() { 

     var bounds = new google.maps.LatLngBounds(); 
     var mapDiv = document.getElementById('map'); 
     var map = new google.maps.Map(mapDiv); 
     map.setCenter(new google.maps.LatLng(latArray[0],lngArray[0])); 
     map.setZoom(18); 

     latArray.forEach(function(lat, i) { 
      // For each one create info window 
      var infoWindow = new google.maps.InfoWindow({ 
       content: '<div id="content>' 
         + '<p style="color:#000000">DeviceID:<p>' 
         + '<p>'+ deviceId[i] + '</p>' 
         +'</div>' 

      }); 
      var marker = new google.maps.Marker({ 
       map: map, 
       position: new google.maps.LatLng(latArray[i],lngArray[i]), 
       icon:"phone6.png" 
      }); 

      // Click on the currently created marker will show the right info window 
      marker.addListener("click", function() { 
       infoWindow.open(map, marker); 
      }); 
     }); 

    }//map.fitBounds(bounds); 



</script> 

<script src="https://maps.googleapis.com/maps/api/js?key=myAPIKey&callback=initMap" 
async defer></script> 

Answer 1

你有當initMap函數運行（從谷歌地圖的JavaScript API V3的異步回調），當xmlHttpRequest完成之間的競爭條件。您的代碼假設xmlHttpRequest先完成，然後初始化地圖。要麼修改你的代碼，所以它的工作原理，如果xmlHttpRequest執行第二，使確定的順序（從initMap函數調用xmlHttpRequest，或者更改代碼以使這個順序並不重要。

一個選項（從做的xmlHttpRequestinitMap功能）：

var locationArray, latArray = [], 
    lngArray = [], 
    contentStringArray = [], 
    contentString = [], 
    deviceId = [], 
    data, deviceIdLoopCount = 2; 
var marker = []; 
var test = "a"; 

function initMap() { 

    var bounds = new google.maps.LatLngBounds(); 
    var mapDiv = document.getElementById('map'); 
    var map = new google.maps.Map(mapDiv); 
    map.setCenter(new google.maps.LatLng(latArray[0], lngArray[0])); 
    map.setZoom(18); 

    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
    if (xhr.readyState == 4) { 
     data = JSON.parse(xhr.responseText); 
     for (i = 0; i < data.length; i++) { 
     if (!(i + 1) % 3 == 0) { 
      latArray.push(data[i]); 
      lngArray.push(data[i + 1]); 
      i = i + 2; 
      deviceId.push(data[deviceIdLoopCount]); 
      console.log(deviceId); 
      console.log(latArray); 
      deviceIdLoopCount += 3; 
     } 
     } 
     // add the markers to the map 
     latArray.forEach(function(lat, i) { 
     // For each one create info window 
     var infoWindow = new google.maps.InfoWindow({ 
      content: '<div id="content>' + '<p style="color:#000000">DeviceID:<p>' + '<p>' + deviceId[i] + '</p>' + '</div>' 

     }); 
     var marker = new google.maps.Marker({ 
      map: map, 
      position: new google.maps.LatLng(latArray[i], lngArray[i]), 
      icon: "phone6.png" 
     }); 

     // Click on the currently created marker will show the right info window 
     marker.addListener("click", function() { 
      infoWindow.open(map, marker); 
     }); 
     }); 
    } 
    } 

    xhr.open('POST', 'GetLocationFromDB', true); 
    xhr.send(); 

} //map.fitBounds(bounds);