如何在一段時間後更新Google地圖標記

我正在從數據庫中提取位置，並通過標記在Google地圖中顯示它們。如何在一段時間後更新Google地圖標記

目前我每30秒更新Google地圖以更新/刷新標記的位置。由於數據庫中標記的位置不斷變化（基本上，我通過Android客戶端應用程序不斷更新數據庫）。

現在我想在30秒或一段時間後刷新標記位置，而不是整個Google地圖。

這是我的代碼。

<!DOCTYPE html > 
    <head> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
    <title>Demo map</title> 
    <style> 
     /* Always set the map height explicitly to define the size of the div 
     * element that contains the map. */ 
     #map { 
     height: 100%; 
     } 
     /* Optional: Makes the sample page fill the window. */ 
     html, body { 
     height: 100%; 
     margin: 0; 
     padding: 0; 
     } 
    </style> 
    </head> 

    <body> 
    <div id="map"></div> 

    <script> 



    window.setInterval(function(){ 
    /// call your function here 
    initMap(); 
    // downloadUrl(); 
    }, 30000); 

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

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



      // Change this depending on the name of your PHP or XML file 

      downloadUrl('http://demo.com/php/storelocator.php?lat=23&lng=90&radius=100', 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('name'); 
       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 
       }); 
       //----- 







       var stavanger=new google.maps.LatLng(23.755421, 90.373741); 
     //var london=new google.maps.LatLng(23.7561944,90.3730818); 

     var london=point; 


       var myTrip=[stavanger,london]; 




    var flightPath=new google.maps.Polyline({ 
    path:myTrip, 
    strokeColor:"#0000FF", 
    strokeOpacity:0.9, 
    strokeWeight:2 
    }); 

    flightPath.setMap(map); 

       //--------------- 
       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> 
    <script async defer 
    src="https://maps.googleapis.com/maps/api/js?key=MAP_API&callback=initMap"> 
    </script> 
    </body> 
</html>

來源

2017-07-14 XpressGeek

您需要添加谷歌地圖圖書館，我建議你檢查這個環節可能是這將幫助你

Google Maps V3 API Library

來源

2017-07-14 17:01:03

您可以創建一個陣列和存儲參考所有標記在那個陣列中。

var markerArr=[]; 
    markerArr.push(marker); // where you are creating new markers.

刪除initmap()以外的setInterval的，而在通過陣列setInterval迭代和你想用彩筆做任何改變。

window.setInterval(function(){ 
    if(markerArr.length>0) 
    { 
    //iterate through array 
    } 
}, 30000);

希望它有幫助。樂於幫助:)

來源

2017-07-15 12:32:01

聽問題已經解決

定義initmap的setInterval函數外（包括包括addmarker和所有的所有功能）。

2.在設定的時間間隔更新標記陣列和

3. AT設置間隔的方法調用initmap()功能

的端CALL爲我工作

來源

2018-01-15 06:33:22 Namah

如何在一段時間後更新Google地圖標記

回答

相關問題