如何在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应该是，因为你还没有显示任何有关标记的代码