【问题标题】:How to dynamically update google map's marker without reloading it如何在不重新加载的情况下动态更新谷歌地图标记
【发布时间】:2019-05-24 05:47:13
【问题描述】:

我正在从汽车上获取动态经纬度(map_lat、map_lon),并且该值每 1 秒不断变化。

有什么方法可以更新谷歌地图的标记,而无需像优步那样重新加载整个地图? 注意:WebApp 是基于 Flask 的。

--[代码]--

var map_lat; // changing value dynamiclly at every 1 sec
var map_lon; // changing value dynamiclly at every 1 sec
.
.
.

setInterval(function myMap() {
        var chlat = window.map_lat;
        var chlon = window.map_lon;

      var myCenter = new google.maps.LatLng(chlat,chlon);
      var mapCanvas = document.getElementById("map");
      var mapOptions = {
                        center: myCenter,
                        zoom: 18,
                        mapTypeId:google.maps.MapTypeId.ROAD
      };
      var map = new google.maps.Map(mapCanvas, mapOptions);
      var marker = new google.maps.Marker({position:myCenter});

      marker.setMap(map);
 },2000);

【问题讨论】:

    标签: javascript html flask google-maps-markers


    【解决方案1】:

    尝试每 1.5 秒只更新一次标记:

         var chlat = window.map_lat;
         var chlon = window.map_lon;
    
          var myCenter = new google.maps.LatLng(chlat,chlon);
          var mapCanvas = document.getElementById("map");
          var mapOptions = {
                            center: myCenter,
                            zoom: 18,
                            mapTypeId:google.maps.MapTypeId.ROAD
          };
          var map = new google.maps.Map(mapCanvas, mapOptions);
          var marker = new google.maps.Marker({position:myCenter});
    
          marker.setMap(map);
    
    setInterval( () => {
    
          marker.setMap(null);
    
    
          var position = new google.maps.LatLng(map_lat,map_lon);
    
          var marker = new google.maps.Marker({position:myCenter});
    
          marker.setMap(map);
    
    
     },1500);
    

    【讨论】:

      猜你喜欢
      • 2019-01-08
      • 2019-10-08
      • 1970-01-01
      • 2011-05-22
      • 1970-01-01
      • 1970-01-01
      • 2020-08-17
      • 2015-10-07
      • 2012-03-23
      相关资源
      最近更新 更多