javascript - 自动更新标记谷歌地图v3

Question

下午好，我创建了一个 map ，它直接从我的 mysql 数据库中用坐标填充标记， map 正在正确生成，并且当我加载页面时标记可以工作。每分钟我都会在银行中获得新的坐标，并希望以时间间隔更新 map 。为此，我使用了 setInterval 来调用标记的初始化函数，但是，不会在 map 上创建新标记，始终显示相同的标记，它们仅在我在页面上按下 f5 时更新，即如果重新加载页面有效，但没有间隔。他甚至在 map 上眨眼时设定的时间间隔，但没有更新。

我的代码:

    <script src="js/markerclusterer.js"></script>
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.maskedinput-1.3.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
<script>
 <?php
     if($attmap_form > 0) {
         echo 'myTimer = window.setInterval(refreshMapa,"'.$attmap_form.'");';
     }
 ?>
 function initialize() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(-25.4848801,-49.2918938),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    locations = [];
    <?php
        require('conecta.php');
        $sql_lista = ("SELECT MONITLATITUDE,MONITLONGITUDE,MONITDATA,MONITHORA,MONITRAIO,MONITPROVEDOR,MONITVELOCIDADE FROM MONITORAMENTO where MONITHORA BETWEEN '$hora1_form' AND '$hora2_form' AND MONITDATA BETWEEN '$data1_form' AND '$data2_form' AND EQUIPIMEI = $imei");
        $query_lista  = mysql_query($sql_lista);
        $achados_lista = mysql_num_rows($query_lista);
        while ($achados_lista = mysql_fetch_array($query_lista)) {
            $lat = $achados_lista['MONITLATITUDE'];
            $lon = $achados_lista['MONITLONGITUDE'];
            $Data = $achados_lista['MONITDATA'];
            $hora = $achados_lista['MONITHORA'];
            $raio = $achados_lista['MONITRAIO'];
            $provedor = $achados_lista['MONITPROVEDOR'];
            $velocidade = $achados_lista['MONITVELOCIDADE'];
            echo 'locations.push ( {Data:"'.$Data.'", latlng: new google.maps.LatLng('.$lat.', '.$lon.'), hora:"'.$hora.'", raio:"'.$raio.'",provedor:"'.$provedor.'",velocidade:"'.$velocidade.'"} );';
        }
    ?>
    var bounds = new google.maps.LatLngBounds();
    var infowindow = new google.maps.InfoWindow();
    var markers = [];
    for(var i=0;i < locations.length;i++ ) {
        var marker = new google.maps.Marker({
            position: locations[i].latlng,
            map:map,
            title:locations[i].hora
        });
        markers.push(marker);
        bounds.extend(locations[i].latlng);
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
              infowindow.setContent(
                 '<strong>Data: ' + locations[i].Data + '<br>Hora: ' + locations[i].hora + '<br></strong>Velocidade aproximada: ' + locations[i].velocidade + ' K/H<br>Raio aproximado de: ' + locations[i].raio + ' metros <br>Provedor: ' + locations[i].provedor + '<br>Latitude: ' + locations[i].latlng
              );
              infowindow.open(map, marker);
            }
       })(marker, i));
    }
    markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: 16,
      gridSize: 60
    });
    map.fitBounds(bounds);
}
arrancaMapa();
function arrancaMapa() {
   google.maps.event.addDomListener(window, 'load', initialize);
}
function refreshMapa() {
   initialize();
   arrancaMapa();
}
function clearMarkers() {
     setAllMap(null);
}
function stopTimer() {
    $("#campoAttMap").val("0");
    clearInterval(myTimer);
}
 </script>

Answer 1

您不必多次调用初始化。您应该实现不同的逻辑，例如获取 map 中没有的最新标记并通过添加它

var marker = new google.maps.Marker({
        position: locations[i].latlng,
        map:map,
        title:locations[i].hora
    });
    markers.push(marker);
    bounds.extend(locations[i].latlng);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(
             '<strong>Data: ' + locations[i].Data + '<br>Hora: ' + locations[i].hora + '<br></strong>Velocidade aproximada: ' + locations[i].velocidade + ' K/H<br>Raio aproximado de: ' + locations[i].raio + ' metros <br>Provedor: ' + locations[i].provedor + '<br>Latitude: ' + locations[i].latlng
          );
          infowindow.open(map, marker);
        }
   })(marker, i));

更新:

我将添加采取以下方法。我不喜欢将 PHP 和 Javascript 混合在一起，我更喜欢使用 JSON 和 AJAX 请求。

更新您的函数，如下所示:

var map;
var markers = [];

setInterval(refreshMapa, 3000);

function initialize() {
  var mapOptions = {
      zoom: 12,
      center: new google.maps.LatLng(-25.4848801,-49.2918938),
      mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  var locations = [];

  $.get("getmarkers.php", function(response){
    for(var i = 0; i < response.markers.length; i++) {
      var marker = response.markers[i];
      var myMarker = {
        Data: marker.Data,
        latlng: new google.maps.LatLng(marker.lat, marker.lon),
        hora: marker.hora,
        raio: marker.raio,
        provedor: marker.provedor,
        velocidade: marker.velocidade
      };

      locations.push(myMarker);
      addMapMarker(myMarker);
    }
  },'json');

  markerClusterer = new MarkerClusterer(map, markers, {
    maxZoom: 16,
    gridSize: 60
  });
  map.fitBounds(bounds);
}

function refreshMapa() {
// make sure this one only returns markers that are new and not in the map
$.get("getnewmarkers.php", function(){
 for(var i = 0; i < response.markers.length; i++) {
   var marker = response.markers[i];
   var myMarker = {
     Data: marker.Data,
     latlng: new google.maps.LatLng(marker.lat, marker.lon),
     hora: marker.hora,
     raio: marker.raio,
     provedor: marker.provedor,
     velocidade: marker.velocidade
   };

   locations.push(myMarker);
   addMapMarker(myMarker);
 }, 'json');
}

function addMapMarker(myMarker) {
   var marker = new google.maps.Marker({
      position: myMarker.latlng,
      map:map,
      title:myMarker.hora
    });
    markers.push(marker);
    bounds.extend(myMarker.latlng);
    google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent('<strong>Data: ' + myMarker.Data + '<br>Hora: ' + myMarker.hora + '<br></strong>Velocidade aproximada: ' + myMarker.velocidade + ' K/H<br>Raio aproximado de: ' + myMarker.raio + ' metros <br>Provedor: ' + myMarker.provedor + '<br>Latitude: ' + myMarker.latlng);
        infowindow.open(map, marker);
      }
    })(marker, i));
}

PS:我不确定 addMapMarker 的实现是否正确，我只是假设您一开始就做对了，您应该检查文档并确保它是正确的。