javascript - 如何在不重新加载的情况下动态更新谷歌地图的标记
问题描述
我正在从汽车上获取动态纬度和经度(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);
解决方案
尝试每 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);
推荐阅读
- angular - 当我在 ag-grid 中使用特定的 customCellRenderer 时,GridReady 事件不起作用
- ios - 如何旋转到只有一个视图控制器的横向
- javascript - 调用异步函数但同步返回结果
- python - 如何将 .values_counts() 用于数据框中的列表项
- angular - Angular Spring Boot 无法正确地将变量传递给端点
- karate - 空手道加特林:将 uriPatterns 列表添加到 karateProtocol()
- python - 将存在插件交换绑定到另一个交换不会产生任何消息
- python - 如何从列表列表中选择元素的滑动窗口?
- java - 如何使用 CrudRepository 将修改后的数据追加到数据库中,而不是替换 SpringBoot 中的数据
- python - 将嵌套的 mongoDB 文档转换为平面 pandas DataFrame(对象数组中的对象数组)