Question

我正在做一个项目，我应该创建一个网页，显示带有指定GPS坐标标记的Google地图。该项目按以下方式组织。在服务器端，我有一个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);

Answer 1

发生了什么

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

固定代码，带注释：

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

然后重新绘制所有标记。

更新谷歌地图标记，无需重新加载地图和闪烁

2 个答案:

发生了什么

固定代码，带注释：