Question

我从数据库中获取位置并通过标记在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>

Answer 1

您需要添加Google地图库，我建议您查看此链接可能会对您有所帮助

Google Maps V3 API Library

Answer 2

您可以创建一个数组并将引用存储到该数组中的所有标记。

await

在setInterval之外移除var markerArr=[]; markerArr.push(marker); // where you are creating new markers.而不是initmap()遍历数组，并对标记执行任何更改。

setInterval

希望它有所帮助。很乐意提供帮助：）

Answer 3

听取问题已经解决

1。在setinterval函数之外定义initmap（这包括所有函数，包括addmarker和all）。

2. 在设置间隔更新标记数组AND

中

3。在设置间隔方法调用initmap()函数的结束调用

为我工作

如何在一段时间后更新Google地图标记

3 个答案: