更新谷歌地图标记没有重新加载地图和眨眼

Updating google map markers without reloading map and blinking

本文关键字：地图 加载 图标 谷歌 更新 新加载      更新时间：2023-09-26

我正在做一个项目，我应该创建一个网页，显示谷歌地图在指定的GPS坐标的标记。本项目按以下方式组织。在服务器端，我有一个php脚本，它接受来自GPS设备的HTTP请求，在相应的.txt文件中接收和存储GPS坐标。php文件还包括javascript/jquery代码，读取带有GPS坐标的。txt文件，创建新的Google地图实例，并为在web浏览器中发出请求的用户在地图上放置标记。作为一名电子硬件工程师，这对我来说很新鲜。我发现的代码每5秒重新加载一次地图，但这使得地图在每次重新加载时闪烁/闪烁一段时间。另外，如果我在浏览器中手动更改缩放，每次重新加载地图时它都会重置为默认值。是否有办法避免地图闪烁，并顺利更新标记。下面是我的javascript/jquery代码片段。

function initialize()
    {
        mapProp = {
          center:myCenter,
          zoom:17,
          mapTypeId:google.maps.MapTypeId.ROADMAP
          };
        setInterval('mark()',5000);
    }
    function mark()
    {
            map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
        var file = "gps.txt";
        $.ajaxSetup({cache: false});
                $.get(file, function(txt) { 
            var lines = txt.split("'n");
            for (var i=0;i<lines.length;i++){
                console.log(lines[i]);
                var words=lines[i].split(",");
                if ((words[0]!="")&&(words[1]!=""))
                {
                    marker=new google.maps.Marker({
                          position:new google.maps.LatLng(words[0],words[1]),
                          });
                    marker.setMap(map);
                    map.setCenter(new google.maps.LatLng(words[0],words[1]));
                    map.addMarker(new MarkerOptions().position(entry.getValue()).title(entry.getKey()));
                }
            }
            lastLength = lines.length;
            marker.setAnimation(google.maps.Animation.BOUNCE);
        });
    }
    google.maps.event.addDomListener(window, 'load', initialize);

这是怎么回事

每次更新都要重新创建地图，而不是创建一次并添加新的标记。

修复代码，带有注释:

function initialize() {
   // map starting point
   var myCenter = new google.maps.LatLng(0, 0);
   // coordinates file
   var file = "gps.txt";
   // init and keep a reference to last line of coordinates
   var lastLength = 0;
   // init and keep reference to last set marker
   var marker;
   // map options
   var mapProp = {
      center:myCenter,
      zoom:17,
      mapTypeId:google.maps.MapTypeId.ROADMAP
   };
   // create map
   var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
   // execute once
   mark();
   // set update
   setInterval(mark, 5000);
   // this runs on schedule to add new markers
   function mark() {
      $.ajaxSetup({cache:false});
      $.get(file, function(txt) {
         var lines = txt.split("'n");
         // disable animation on last marker from previous update
         if(marker) {
            marker.setAnimation(null);
         }
         // start from last line + 1 from previous update
         for(var i=lastLength; i<lines.length; ++i) {
            // some debug
            //console.log(lastLength);
            //console.log(lines[i]);
            var words=lines[i].split(",");
            if(words[0] != "" && words[1] != "") {
               // new marker
               marker = new google.maps.Marker({
                  position:new google.maps.LatLng(words[0],words[1]),
               });
               // put marker on map
               marker.setMap(map);
               // center on marker
               map.setCenter(new google.maps.LatLng(words[0],words[1]));
               // I don't know the api enough to fix this part although it seems to work without it
               //map.addMarker(new MarkerOptions().position(entry.getValue()).title(entry.getKey()));
            }
         }
         // update list starting position
         lastLength = lines.length;
         //set animation on current last marker
         marker.setAnimation(google.maps.Animation.BOUNCE);
      }, 'text'); // added datatype:text
   }
}
// init
google.maps.event.addDomListener(window, 'load', initialize);

删除这一行以消除弹跳问题。

marker.setAnimation(google.maps.Animation.BOUNCE);

在绘制标记时，将它们保存在数组

中
marker[j]=new google.maps.Marker({position:new google.maps.LatLng(words[0],words[1])});

和以后只添加新的映射或删除所有旧的

marker[j].setMap(null);

然后重新绘制所有标记

相关文章：