google-maps - 如何在不刷新MAP的情况下刷新经纬度

Question

我们的网站上有谷歌地图。我们希望每 5 秒更新一次纬度和经度（从 MySQL 调用）并更改地图上的标记位置，而 MAP 或页面不会重新加载它。我们的 JAVASCRIPT 代码是：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
var mapOptions = {
  zoom: 4,
  center: myLatlng,
  mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map-canvas"), mapOptions);

// To add the marker to the map, use the 'map' property
var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Hello World!"
});

Answer 1

您必须对后端脚本使用 AJAX 调用，该脚本将返回带有新标记数据的 JSON 字符串。

jQuery代码：

setInterval(function () {

    $.post('your-file.php', { }, function (r) {
        var result = eval('(' + r + ')');

        var newLatLng = new google.maps.LatLng(result.latitude, result.longitude);

        marker.setMap(null); 

        /* Recreate the marker here or update coordinates from result.latitude and result.longitude */
        });
}, 5000);

这是你的文件.php：

/* MySQL Query here */

echo json_encode('latitude' => $latitude, 'longitude' => $longitude);

使用 marker.setMap(null) 您可以从地图中删除标记，然后使用正确的坐标再次创建它，否则只需使用 marker.setPosition(newLatLng);