Question

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

我的代码：

    <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

您不必多次调用初始化。您应该实现不同的逻辑，例如获取不在地图中的最新标记并通过

添加它

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的实现是否正确我只是假设你在第一时间做对了，你应该查看文档并确保它是正确的。

Answer 2

是的，PHP是一种服务器端语言，只在页面加载时执行。我不确定您希望JS如何更新标记，因为任何地方都没有get / post。如果要从服务器获取数据，则必须联系服务器。

此循环

    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.'"} );';
    }

仅执行ONCE。 locations的值不会发生变化。

您应该阅读jQuery ajax请求。向PHP文件发出HTTP请求，该文件将位置返回为JSON（仅回显JS数组）并使用结果更新标记。

Answer 3

原因：没有更新功能（或代码块）来在代码中获取更新或新添加的DB信息。此外，您不会读取新的数据库信息并将其添加到地图数据中，因为您的PHP代码仅在初始化时调用一次。

使用PHP代码，由于PHP功能，您不会这样做。 PHP只适用于后端服务端。

建议： 1.您需要客户端更新才能访问服务端更新并接收它们。 2.您需要将更新或新添加的数据库数据添加到客户端的Marker（map）数组中。

为此， 1.在AJAX或其他方面添加客户端更新功能，以将信息更新为JSON对象。 2.调用AJAX块（检索块或函数以读入JSON对象数组并将它们添加到地图标记数组）。 3.将Map Markers的空指针更新为新的Map数组。

很抱歉没有根据您的代码创建有效的代码集。这需要相当长的时间。

自动更新标记谷歌地图v3

3 个答案: