如何更新谷歌地图上的标记位置，而无需刷新整个地图？

我想每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>

来源

2014-10-10 C graphics

您正在使用静态地图。要改变它，你必须重新加载它。如果您想动态更新Google地图上的标记，请使用Google Maps JavaScript API v3。 – geocodezip 2014-10-10 22:42:17

正如@geocodezip所说，Google的JavaScript API提供的地图对于此任务会更好。你有使用静态地图的具体原因吗？ – 2014-10-13 02:42:01

最好的办法是使用navigator.geolocation.watchPosition它调用一个函数仅当代理的现在的位置变化。所以

1）你不需要设置一个计时器功能不断刷新

2）平移由map.panTo（）在 this sample使问题过于解决处理。

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>

希望这一切heped

来源

2014-10-17 05:28:19

-1

更新的动画标记

包括脚本

<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

来源

2014-10-13 13:40:54

不错的例子。我会替换你的最后两行代码：** marker.setPosition（new google.maps.LatLng（locs [0] [0]，locs [0] [1]））; **避免再次创建标记。也不需要触发器（地图，'调整大小'）的调用。 – 2014-10-14 16:43:55

@ A-Tomy-k真棒..谢谢 – 2014-10-14 20:28:06

@ tnt-rox我的问题是关于显示当前位置并顺利刷新它！ – 2014-10-16 01:28:12

我有同样的问题，如提问。最简单的解决方法是只需更换

navigator.geolocation.getCurrentPosition(showPosition,showError);

与

navigator.geolocation.watchPosition(showPosition,showError);

现在，在地图中的当前位置是越来越跟踪/中心，当您移动。

来源

2016-09-16 13:03:15 retikulum

如何更新谷歌地图上的标记位置，而无需刷新整个地图？

回答

相关问题