Question

我试图每隔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>

Answer 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>

希望一切都加速

Answer 2

我遇到了像提问者一样的问题。最简单的解决方案就是替换

navigator.geolocation.getCurrentPosition(showPosition,showError);

带

navigator.geolocation.watchPosition(showPosition,showError);

现在，当您移动时，您在地图中的当前位置会被跟踪/居中。

Answer 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

更新：感谢MARK-setPosition的A-Tomy-k

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

3 个答案: