如何在x秒後顯示谷歌地圖標記而不刷新谷歌地圖？

Question

如何在沒有谷歌地圖刷新的情況下每隔x秒後顯示谷歌地圖？

1.Markers latLong來自數據庫。

2.在Google地圖上分配標記。

3.馬克斯latLong 30秒後改變。

問題是谷歌地圖得到刷新。所有我想谷歌地圖應刷新顯示與更新的LatLong。

這是我的代碼。

<script> 

    function initMap() { 
     var infowindow = new google.maps.InfoWindow(); 
     var map = new google.maps.Map(document.getElementById('map'), { 
      zoom: 12, 
      center: {lat: 19.9518684, lng: 73.7354084} 
     }); 

     var image = '<?php echo $getImagePath; ?>' 
     for (var o in markers) { 

      lat = markers[ o ].lat; 
      lng = markers[ o ].lng; 
      address = markers[ o ].address; 

      var my = new google.maps.LatLng(lat, lng); 
      //console.log(my); 
      var marker = new google.maps.Marker({ 
       position: my, 
       map: map, 
       icon: image, 

      }); 
      google.maps.event.addListener(marker, 'click', function() { 
       infowindow.setContent("'" + address + "'"); 
       infowindow.open(map, marker); 
      }); 

     } 

    } 

</script> 

我試圖google.maps.event.addDomListener(window, "load", initMap);和window.onload = initMap;，但沒有奏效。

任何人都可以幫我嗎？

Answer 1

我希望你的代碼的這個小的重寫將幫助你的方式。既然這樣，有很多的問題不存在的信息，所以我只能猜測

// note these are globals because they are set in initMap and used outside of it 
var image = '<?php echo $getImagePath; ?>'; 
var map; 
var infowindow; 
var markers = [/* some initially loaded markers loaded as if by majick unicorn farts */]; 

function initMap() { 
    infowindow = new google.maps.InfoWindow(); 
    map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 12, 
     center: {lat: 19.9518684, lng: 73.7354084} 
    }); 
    doMarkers(true); 
} 
function doMarkers(firstLoad) { 
    markers.forEach(marker => { 
     var lat = marker.lat; 
     var lng = marker.lng; 

     marker.my = new google.maps.LatLng(lat, lng); 

     if (firstLoad) { // marker has no marker the first time because it's not on a map yet 
      marker.marker = new google.maps.Marker({ 
       position: marker.my, 
       map: map, 
       icon: image, 

      }); 

      google.maps.event.addListener(marker.marker, 'click', function() { 
       infowindow.setContent("'" + marker.address + "'"); 
       infowindow.open(map, marker.marker); 
      }); 
     } else { // move existing marker 
      marker.marker.setPosition(marker.my); 
     } 
    } 
} 
function magicallyFindAndUpdateMarkerDataUsingUnicornFarts(marker) { 
    // find corresponding marker in markers array 
    // update lat, lng and address 
} 
function doSomeAjaxToGetNewMarkerPositionsAndCallCallback(cb) { 
    var xhr = new XMLHttpRequest(); 
    xhr.open('GET', 'someURI'); 
    xhr.onload = function() { 
     var data = JSON.parse(xhr.responseText); 
     data.forEach(function(marker) { 
      magicallyFindAndUpdateMarkerDataUsingUnicornFarts(marker); 
     }); 
     cb() 
    } 
    xhr.send(); 
} 
setInterval(function() { 
    doSomeAjaxToGetNewMarkerPositionsAndCallCallback(function() { 
     doMarkers(false); 
    }); 
}, 30000); 

當然，我不能看到標記加載方式（進入markers在你的代碼），我也不能告訴你什麼doSomeAjaxToGetNewMarkerPositionsAndCallCallback或magicallyFindAndUpdateMarkerDataUsingUnicornFarts應該是，因爲你還沒有顯示任何有關標記的代碼