在用户拖动标记后，在重新启动/刷新时在 Google Maps API 上保存标记

Question

下面是我的代码，我在其中创建了一个地理定位标记和一个用户可以在地图上拖动的标记。 我想知道如果用户刷新，我需要做什么才能保持拖动标记的位置。以下是我的代码：

function initialize() {

    var locations = [
        ['Your Hostel Is Here', 54.911615,-1.377025,],

        ];

    var map = new google.maps.Map(document.getElementById('map'), {
        zoom: 10,
        center: new google.maps.LatLng(54.911615,-1.377025),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
        marker = new google.maps.Marker({
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map,
            draggable: true
        });

          localStorage.setItem('marker', marker);
      var retrievedmarker = localStorage.getItem('marker');

        google.maps.event.addListener(marker, 'click', (function(marker, i) {
            return function() {
                infowindow.setContent(locations[i][0]);
                infowindow.open(map, marker);
            }
        })(marker, i));
    }

    // Check if user support geo-location
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            var latitude = position.coords.latitude;
            var longitude = position.coords.longitude;
            var geolocpoint = new google.maps.LatLng(latitude, longitude);

            var mapOptions = {
                zoom: 8,
                center: geolocpoint,
                mapTypeId: google.maps.MapTypeId.HYBRID
            }
            // Place a marker
            var geolocation = new google.maps.Marker({
                position: geolocpoint,
                map: map,
                title: 'Your geolocation',
                icon: 'http://labs.google.com/ridefinder/images/mm_20_green.png'
            });
        });
    }
}
google.maps.event.addDomListener(window, 'load', initialize);

Answer 1

您需要将标记对象的经纬度值存储在字符串中，而不是对象中。此外，您需要监听标记 mouseup 事件以存储标记值以供以后显示。

添加此事件：

//Record the new marker position
google.maps.event.addListener(marker, 'mouseup', function() {
        localStorage.setItem('marker', marker.position.lat() + "," + marker.position.lng());
        var retrievedmarker = localStorage.getItem('marker');
      });

编辑以下代码部分：

//Get the last recorded marker position for display
var retrievedmarker = localStorage.getItem('marker');
mylatlng = retrievedmarker.split(",");

for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
        //position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        position: new google.maps.LatLng(mylatlng[0], mylatlng[1]),
        map: map,
        draggable: true
    });

注意：我没有检查 localStorage 键是否存在，请确保在取值之前检查它。