web-dev-qa-db-ja.com

リーフレットAPIを使用してマーカーの場所を更新する

Leaflet APIを使用してWebアプリを構築したい。最初にユーザーは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);
javascriptleaflet
27
floflo

あなたの質問の中のコードは少し分かりにくいです。スニペットを投稿するだけで問題が何であるかを言うのは難しいです。

そのまま、このコード：

_    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/

47
Dr.Molle

pdate（） それが私のために機能するマーカーメソッドを試してください

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