更新谷歌地图标记而不重新加载地图和闪烁

Question

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

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);

Answer 1

发生了什么

您会在每次更新时不断重新创建地图，而不是创建一次然后向其中添加新标记。

固定代码，带有 cmets：

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);

Answer 2

删除此行以摆脱弹跳问题。

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);

然后重新绘制所有标记。