自动更新标记Google Maps v3 - javascript

下午好，我创建了一个地图，该地图直接从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的实现是否正确（我只是假设您一开始就正确），您应该检查文档并确保它正确。

如果我得到url('')，我该如何使用另一个URL - javascript

我是新手，正在写这篇文章，但是如果源上没有图像，那么我只有空白。有人可以告诉我，如果我正在获取背景图像，如何获取/images/no-image.jpg：url（）;这是我的代码：<div class="uk-clearfix uk-position-relative"> <div class="recipeb…

Javascript IF语句 - javascript

                        嗨，我有这段代码可以正常工作，并将两个日历显示为一个日历。我还有一个php变量$login_session，其中包含登录电子邮件地址的用户。关于如何显示[email protected]日历的任何想法（伪代码）IF $login_session == "[email protected]&#…

如何在没有for循环的情况下在Javascript中使用Django模板标签 - javascript

我想在JavaScript中使用模板变量：我的问题是在javascript代码中使用for循环，for循环之间的所有事情都会重复..但我不想要....下面粘贴了我的代码..有人可以告诉我更好的方法吗这..因为这看起来很丑..这是我的代码： {% block extra_javascript %} <script src="/static/js…

如何使用Javascript将字典列表解析为JSON格式？ - javascript

我正在尝试解析JSON格式的词典列表，以便可以使用它们的数据创建一组列表项，其中使用此数据生成文本和ID。我将以下内容传递到我的网页，并在投放之前将其存储在隐藏的div中： [{'text': 'org1', 'id': 'org1ID'}, {'text':…

将字符串值添加到php / javascript - javascript

您好，我有一些代码需要在其中插入一些字符串值，但是每次我输入字母时，脚本都无法正常工作。<script type="text/javascript"> "use strict"; var values = [1,2,3,4,5,6,7,8,9]; /*add string values here*/ var…