如何在不刷新整个地图的情况下更新谷歌地图上的标记位置？
Posted
技术标签:
【中文标题】如何在不刷新整个地图的情况下更新谷歌地图上的标记位置？【英文标题】：How to update a marker's location on google map without having to refresh entire map? 【发布时间】：2014-10-10 21:59:13 【问题描述】：我正在尝试每 3 秒在谷歌地图上显示当前位置。它在技术上有效，但是整个地图也每 3 秒刷新一次。如何在地图上流畅地显示当前位置而无需刷新整个地图（除非必要，例如当代理离开地图并且地图上不再存在当前位置时）？
这是我的代码：
<!DOCTYPE html>
<html>
<body>
<p id="demo">It displays your current location:</p>
<div id="mapholder"></div>
<div id="time"></div>
<script>
window.onload = getLocation();
var x = document.getElementById("demo");
var displayTime = document.getElementById("time");
function getLocation()
if (navigator.geolocation)
// navigator.geolocation.getCurrentPosition(showPosition,showError);
setInterval(function ()
navigator.geolocation.getCurrentPosition(showPosition,showError);
var time = new Date();
displayTime.innerHTML = time.getHours() + ":" + time.getMinutes() + ":" + time.getSeconds();
, 3000);
else
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position)
var latlon = position.coords.latitude+","+position.coords.longitude;
var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
+latlon+"&markers=size:mid%7Ccolor:red%7C"+latlon+"&zoom=14&size=400x300&sensor=false";
document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
function showError(error)
switch(error.code)
case error.PERMISSION_DENIED:
x.innerHTML = "User denied the request for Geolocation."
break;
case error.POSITION_UNAVAILABLE:
x.innerHTML = "Location information is unavailable."
break;
case error.TIMEOUT:
x.innerHTML = "The request to get user location timed out."
break;
case error.UNKNOWN_ERROR:
x.innerHTML = "An unknown error occurred."
break;
</script>
</body>
</html>
【问题讨论】：
您使用的是静态地图。要更改它，您必须重新加载它。如果您想动态更新 Google 地图上的标记，请使用 Google Maps javascript API v3。 正如@geocodezip 所说，Google 的 JavaScript API 提供的地图更适合这项任务。您使用静态地图是否有特定原因？ 【参考方案1】：最好的办法是使用 navigator.geolocation.watchPosition，它仅在代理的位置发生变化时才调用函数。所以
1) 无需设置定时功能不断刷新
2) 平移由 this sample 中的 map.panTo() 处理，因此该问题也得到了解决。
3) 下面的代码也使用了 navigator.geolocation
<script>
var x = document.getElementById("demo");
function getLocation()
if (navigator.geolocation)
navigator.geolocation.watchPosition(showPosition);
else
x.innerHTML = "Geolocation is not supported by this browser.";
function showPosition(position)
x.innerHTML = "Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
</script>
希望一切顺利
【讨论】：
【参考方案2】：我和提问者有同样的问题。最简单的解决方案就是替换
navigator.geolocation.getCurrentPosition(showPosition,showError);
与
navigator.geolocation.watchPosition(showPosition,showError);
现在，当您移动时，您在地图中的当前位置会被跟踪/居中。
【讨论】：
【参考方案3】：更新为动画标记
包含脚本
<script src="http://maps.googleapis.com/maps/api/js?sensor=true" type="text/javascript"></script>
HTML
<button onclick="fly()">Fly</button>
<div id="mapCanvas"></div>
JavaScript
Number.prototype.linearScale = function(r1, r2)
return (this - r1[0] ) * (r2[1] - r2[0] ) / (r1[1] - r1[0] ) + r2[0];
;
var start = [40.722283, -74.014893];
var end = [51.508742, -0.131836];
var center = [((end[0] - start[0]) / 2) + start[0], ((end[1] - start[1]) / 2) + start[1]]
var el = document.getElementById('mapCanvas');
var map = new google.maps.Map(el,
center : new google.maps.LatLng(center[0], center[1]),
zoom : 2,
mapTypeId : google.maps.MapTypeId.ROADMAP,
disableDefaultUI : true,
panControl : false,
zoomControl : false,
mapTypeControl : false,
scaleControl : false,
streetViewControl : false
);
var marker = new google.maps.Marker(
position : (new google.maps.LatLng(start[0], start[1])),
map : map
);
function fly()
var steps = 100;
var h = setInterval(function()
marker.setPosition(new google.maps.LatLng(steps.linearScale([100, 0], [start[0], end[0]]), steps.linearScale([100, 0], [start[1], end[1]])));
if ((steps--) == 0)
clearInterval(h);
, 100);
;
CodePen Here
更新：感谢 A-Tomy-k 提供 marker.setPosition
【讨论】：
很好的例子。我会将您的最后两行代码替换为： marker.setPosition(new google.maps.LatLng(locs[0][0], locs[0][1])); 它避免了创建再次标记。也不需要 trigger(map, 'resize') 调用。 @tnt-rox 我的问题是关于显示当前位置并顺利刷新！ @tnt-rox 在我的问题中我说“我怎样才能在地图上流畅地显示当前位置而不必刷新整个地图（除非有必要，例如当代理离开地图和当前位置不再存在于地图上）”。所以关注的是 1）当前位置 2）刷新它而不闪烁 3）如果标记离开地图，移动地图本身。您选择的具体示例是出发地和目的地在不需要平移的地图中同时（并且总是）！无处使用当前位置，请同时运行我的代码！！ @Cgraphics 这将违反 Google 的使用条款。徽标必须始终显示。以上是关于如何在不刷新整个地图的情况下更新谷歌地图上的标记位置？的主要内容，如果未能解决你的问题，请参考以下文章
如何在不点击标记的情况下在 iOS 谷歌地图中显示信息窗口？