最受欢迎

自动更新标记谷歌地图v3

automatically update marker google maps v3

本文关键字：谷歌地图 v3 更新 | 更新日期: 2023-09-27

下午好，我创建了一个地图，直接从我的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>

您不应该多次调用initialize。您应该实现不同的逻辑，例如，获取不在地图中的最新标记，并通过添加它

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的实现是否正确。我只是假设你一开始就正确，你应该检查文档并确保它是正确的。

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

只执行一次。locations的值不变。

您应该阅读jQueryajax请求。向一个PHP文件发出HTTP请求，该文件以JSON的形式返回位置（只需回显JS数组），并使用结果更新标记。

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

使用PHP代码，由于PHP的特性，您不会这么做。PHP只能在后端服务端工作。

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

为此，1.在AJAX或其他版本中添加客户端更新功能，将信息更新为JSON对象。2.调用AJAX块（检索要在JSON对象数组中读取的块或函数，并将它们添加到映射标记数组中）。3.将Map Markers的空指针更新到新的Map数组。

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

相关文章：
最新更新
www.56WenDa.com 2012-2023 | php问答网 | php学习