實時更新Google地圖標記，無需刷新整個地圖

-1

我一直在關注Google網站上關於如何正確實施Google地圖和MySQL數據的教程。一切正常，但在地圖上獲取最新標記的唯一方法是刷新頁面。我試圖將SetInterval添加到整個函數中，它可以工作。但是，每次循環時，整個地圖都會刷新。如果您在地圖上移動，然後重置在地圖上，這尤其令人討厭。有沒有什麼辦法可以使標記刷新？按照我的理解，最新的數據必須在每次循環中從MySQL中取出。這裏是我的代碼：實時更新Google地圖標記，無需刷新整個地圖

<div class="container"> 
    <h3>Location of Devices</h3> 

    <div id="map"> 

    </div> 
</div> 
<script> 

var customLabel = { 
    restaurant: { 
     label: 'R' 
    }, 
    bar: { 
     label: 'B' 
    } 
    }; 

    function initMap() { 
    var map = new google.maps.Map(document.getElementById('map'), { 
     center: new google.maps.LatLng(XX.XXXX, XX.XXXX), 
     zoom: 17 
    }); 
    var infoWindow = new google.maps.InfoWindow; 

     // Change this depending on the name of your PHP or XML file 
     downloadUrl('http://XXXXX.com/XXXXXXX.php/', function(data) { 
     var xml = data.responseXML; 
     var markers = xml.documentElement.getElementsByTagName('marker'); 
     Array.prototype.forEach.call(markers, function(markerElem) { 
      var id = markerElem.getAttribute('id'); 
      var name = markerElem.getAttribute('id'); 
      var address = markerElem.getAttribute('address'); 
      var type = markerElem.getAttribute('type'); 
      var point = new google.maps.LatLng(
       parseFloat(markerElem.getAttribute('lat')), 
       parseFloat(markerElem.getAttribute('lng'))); 

      var infowincontent = document.createElement('div'); 
      var strong = document.createElement('strong'); 
      strong.textContent = name 
      infowincontent.appendChild(strong); 
      infowincontent.appendChild(document.createElement('br')); 

      var text = document.createElement('text'); 
      text.textContent = address 
      infowincontent.appendChild(text); 
      var icon = customLabel[type] || {}; 
      var marker = new google.maps.Marker({ 
      map: map, 
      position: point, 
      label: icon.label 
      }); 
      marker.addListener('click', function() { 
      infoWindow.setContent(infowincontent); 
      infoWindow.open(map, marker); 
      }); 
     }); 
     }) 
    } 



    function downloadUrl(url, callback) { 
    var request = window.ActiveXObject ? 
     new ActiveXObject('Microsoft.XMLHTTP') : 
     new XMLHttpRequest; 

    request.onreadystatechange = function() { 
     if (request.readyState == 4) { 
     request.onreadystatechange = doNothing; 
     callback(request, request.status); 
     } 
    }; 

    request.open('GET', url, true); 
    request.send(null); 
    } 

    function doNothing() {} 
</script>

我試着添加setInterval（）到initMap（）和downloadUrl（）。我不想將Interval添加到initMap（），除非有辦法使代碼不會一遍又一遍刷新整個地圖。有什麼辦法可以做到這一點？

來源

2017-08-13 Matthew Humphreys

更新標記：1.刪除現有標記，2.再次調用downloadUrl。如果你需要做很多事情，並且標記是「移動」的，你可以（而不是刪除所有標記），將每個標記移動到它的新位置（在downloadUrl的回調函數中） – geocodezip

相關問題：[ Google地圖V3：更新標記]（https://stackoverflow.com/questions/20498760/google-maps-v3-updating-markers） – geocodezip

請注意，您可能也有緩存方面的問題，很難分辨所發佈的信息。 – geocodezip

這裏是我的建議：

創建一個名爲一個全局變量，並在initMap函數初始化。
每當位置改變時使用marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/))函數將標記設置爲新的位置。
通過這種方式，你不會一遍又一遍地重新創建標記。
希望有所幫助！

來源

2017-08-13 18:19:15

實時更新Google地圖標記，無需刷新整個地圖

回答

相關問題