Javascript 使用传单 API 更新标记位置

update marker location with leaflet API

提问by floflo

I want to build web app with the Leaflet API. First my user is geolocated with IP then if he accepts I try to update his position with HTML5 geolocation (accuracy is better).

我想使用 Leaflet API 构建 Web 应用程序。首先我的用户使用 IP 进行地理定位，然后如果他接受我尝试使用 HTML5 地理定位更新他的位置（准确性更好）。

My problem is that the marker position is not updated on the map and the code bellow fails with no error. I have try hundred of different syntax and methods from leaflet documentationto update marker position (ie. setLatLng) but I did not succeed. I would like to understand what's wrong with my code.

我的问题是地图上的标记位置未更新，并且下面的代码失败且没有错误。我已经尝试了来自传单文档的数百种不同的语法和方法来更新标记位置（即 setLatLng），但我没有成功。我想了解我的代码有什么问题。

---

---

My problem is solved by doing like this :

我的问题是通过这样做解决的：

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

Old code was:

旧代码是：

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

回答by Dr.Molle

The code inside your question is a little bit confusing, it's hard to say what the issue is when you only post snippets.

您问题中的代码有点令人困惑，当您只发布片段时，很难说出问题是什么。

As it is, this code:

照原样，这段代码：

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

..should work as expected inside onLocationFound().

..应该在里面按预期工作onLocationFound()。

You can simplify it:

你可以简化它：

marker.setLatLng(e.latlng);

However, I guess the problem is a scope-issue, some of your variables (e.g. marker) is not accessible inside onLocationFound.

但是，我想问题是范围问题，您的某些变量（例如标记）在 onLocationFound 中无法访问。

Here an example how to achieve it:

这是一个如何实现它的示例：

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

Demo: http://jsfiddle.net/doktormolle/6ftGz/

演示：http: //jsfiddle.net/doktormolle/6ftGz/

回答by Kedar.Aitawdekar

Try update()of marker method it works for me

尝试对我有用的标记方法的update()

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