Сохранение маркера в API Карт Google при перезапуске / обновлении после его перетаскивания пользователем

Question

Сохранение маркера в API Карт Google при перезапуске / обновлении после его перетаскивания пользователем

0

ниже мой код, где я создал маркер геолокации и маркер, который пользователь может перетащить по карте. Мне интересно, что мне нужно сделать, чтобы сохранить местоположение перетаскиваемого маркера, если пользователь обновится. Ниже мой код:

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);

Chris Lim 28 нояб. 2013, в 16:28

Источник

0

использование только localStorage.setItem()/getItem() не будет работать, потому что это работает для пар ключ / значение строки. Посмотрите некоторые советы по хранению объектов в HTML5 localStorage . И ваш marker объект не просто строка. И я не вижу, реагирует ли ваш код на какие-либо изменения маркера.
Anto Jurković 28 нояб. 2013, в 22:36

Теги:

javascript

jquery

html

google-maps-api-3

1 ответ

Ещё вопросы

использование только localStorage.setItem()/getItem() не будет работать, потому что это работает для пар ключ / значение строки. Посмотрите некоторые советы по хранению объектов в HTML5 localStorage . И ваш marker объект не просто строка. И я не вижу, реагирует ли ваш код на какие-либо изменения маркера.

Chris Lim · Answer 1 · 2013-12-02T07-20-00.000Z

Вам нужно сохранить значение long long объекта-маркера в строке, а не объект. Кроме того, вам необходимо прослушать событие 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, убедитесь, что вы проверяете его до получения значения.

Что вы подразумеваете под ключом локального хранилища?
По первому запуску или по другим причинам localStorage.setItem еще не будет вызываться, и поэтому localStorage.getItem не сможет выполнить поиск ключа «marker». В этом случае вы должны установить маркер карты Google по умолчанию для вашей новой позиции перетаскивания.