Обновить расположение маркера с помощью API-интерфейса листовки

Я хочу создать веб-приложение с API-интерфейсом Leaflet. Сначала мой пользователь привязан к IP, а затем, если он согласен, я пытаюсь обновить его позицию с помощью геолокации HTML5 (точность лучше).

Моя проблема в том, что позиция маркера не обновляется на карте, а приведенный ниже код не сработает без ошибок. Я попробовал сотни различных синтаксисов и методов из документации листка, чтобы обновить позицию маркера (то есть setLatLng), но мне это не удалось. Я хотел бы понять, что не так с моим кодом.

Моя проблема решена, например:

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    marker.setLatLng(newLatLng);

Старый код:

//initial IP based geolocation

var lat = google.loader.ClientLocation.latitude;
var lng = google.loader.ClientLocation.longitude;

//place marker on the map

var marker = L.marker([lat,lng]).addTo(map);

//start HTML5 geolocation 

map.locate({setView: true, maxZoom: 16});

function onLocationFound(e) {

    var marker = L.marker([e.latlng.lat,e.latlng.lng]).update(marker);
    alert ('New latitude is ' + e.latlng.lat)
}

map.on('locationfound', onLocationFound);

Ответы

Ответ 1

Код внутри вашего вопроса немного запутанный, трудно сказать, в чем проблема, когда вы публикуете только фрагменты.

Как это, этот код:

    var lat = (e.latlng.lat);
    var lng = (e.latlng.lng);
    var newLatLng = new L.LatLng(lat, lng);
    marker.setLatLng(newLatLng);

.. должен работать как ожидалось внутри onLocationFound().

Вы можете упростить его:

marker.setLatLng(e.latlng);

Однако, я думаю, проблема связана с проблемой области, некоторые из ваших переменных (например, маркер) недоступны внутри onLocationFound.

Вот пример, как его достичь:

function init(){
    var map             = L.map('map', {center: [51.505, -0.09], zoom: 13}),
        marker          = L.marker(map.getCenter()).addTo(map),
        glcl            = google.loader.ClientLocation,
        onLocationfound = function(e){
          marker.setLatLng(e.latlng);
          map.setView(marker.getLatLng(),map.getZoom()); 
          alert('Marker has been set to position :'+marker.getLatLng().toString());
        };

    L.tileLayer('http://{s}.tile.cloudmade.com/[yourCloudmadeKey]/997/256/{z}/{x}/{y}.png').addTo(map);

    map.on('locationfound', onLocationfound);

    if(glcl){//when google.loader.ClientLocation contains result
       onLocationfound({latlng:[glcl.latitude,glcl.longitude]});
    }else{alert('google.loader.ClientLocation fails');}

    map.locate();
}

Демо: http://jsfiddle.net/doktormolle/6ftGz/

Ответ 2

Попробуйте update() метода маркера, который он работает для меня

var lat = (e.latlng.lat);
var lng = (e.latlng.lng);
marker.setLatLng([lat, lng]).update();  // Updates your defined marker position