Question

我一直在谷歌网站上关注如何使用MySQL数据正确实现Google Map的教程。一切正常，但在地图上获取最新标记的唯一方法是刷新页面。我试图将SetInterval添加到整个函数中，这确实有效。但是，每次循环时，整个地图都会刷新。如果您在地图上移动然后重置您，这尤其令人讨厌。有没有办法让标记刷新？我理解它的方式，每次在循环中必须从MySQL中提取最新数据。这是我的代码：

<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（），除非有办法让代码不能一遍又一遍地刷新整个地图。有没有办法实现这个目标？

Answer 1

这是我的建议：

创建一个名为marker的全局变量，并在initMap函数中初始化它。
每当位置更改时，使用marker.setPosition(new google.maps.LatLng(/*put the lat*/,/*put the lng*/))功能将标记设置为新位置。
通过这种方式，你不会一遍又一遍地重新创建标记。
希望有所帮助！

实时更新Google地图标记，无需刷新整个地图

1 个答案: