Question

以下代码显示了从我的数据库中获取的坐标的地图。当GPS设备移动时，coords会在数据库中发生变化，但是当地图刷新时，它不会显示新的位置，只有当我刷新不太好的页面时它才会更新。看看我的代码有什么突出的原因吗？

        <script>
            google.maps.visualRefresh = true;

            var myCenter = new google.maps.LatLng(<?php echo $latlon; ?>);

            function initialize()
            {
                var mapProp = {
                    center: myCenter,
                    zoom: 17,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);

                var marker = new google.maps.Marker({
                    position: myCenter,
                    icon: 'images/bike.png'
                });

                marker.setMap(map);
            }

               var mapProp = setInterval(function () {
                navigator.geolocation.getCurrentPosition(initialize);
            }, 15000);

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>

        <center><div id="googleMap" style="width:1000px;height:500px;"></div></center>

提前多多感谢。

Answer 1

如果更改了ID，则不会更新坐标：

var myCenter = new google.maps.LatLng(<?php echo $latlon; ?>);

但是，如果您想在用户地理位置（基于浏览器）之后移动标记，则应将间隔函数更改为以下内容：

var mapProp = setInterval(function () {
  navigator.geolocation.getCurrentPosition(function (position) {
    myCenter = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

    initialize();
  });
}, 1500);

Answer 2

navigator.geolocation.getCurrentPosition接受一个成功函数，其中更新的位置作为参数传递，如下所示：

navigator.geolocation.getCurrentPosition(function(position) {
    // you can now use position.latitude and position.longitude
    // to use the new position
});

这是一个完整的示例，它将地图更新为标记：

// Store map and marker outside of initialize, so we can use it elsewhere
var map, marker;

function initialize() {
    var mapCenter = new google.maps.LatLng(<?php echo $latlon; ?>);

    map = new google.maps.Map(document.getElementById("googleMap"), {
        center: mapCenter,
        zoom: 17,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    marker = new google.maps.Marker({
        position: mapCenter,
        icon: 'images/bike.png',
        map: map
    });

    // There’s no point in updating without having an active map,
    // so start the interval here
    setInterval(function() {
        navigator.geolocation.getCurrentPosition(updateCenter);
    }, 15000);
}

function updateCenter(position) {
    // The position getCurrentPosition passes, IS NOT a google.maps.LatLng object. First, we need to convert it:
    var mapCenter = new google.maps.LatLng(position.latitude, position.longitude);

    // Update stuff, instead of reinitializing
    marker.setPosition(mapCenter);
    map.setCenter(mapCenter);
}

我的地图仅更新页面刷新而非地图刷新

2 个答案: