使用Leaflet API更新标记位置

Question

我希望使用Leaflet API构建Web应用程序。首先，我的用户会通过IP进行地理定位，然后如果他同意，我会尝试使用HTML5地理定位更新他的位置（精度更高）。

我的问题是标记位置没有在地图上更新，并且下面的代码失败了而没有出现错误。我已经尝试从leaflet文档中使用数百种不同的语法和方法来更新标记位置（例如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);

- floflo

---

当我使用addTo(map)时，它会创建一个新的标记，但不会更新现有的标记。有什么想法吗？ - floflo

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

然而，我猜问题是作用域问题，你的一些变量（例如marker）在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/

- Dr.Molle

---

我遇到了“e.latlng”的问题。在执行“glcl”之后，“e.latlng”返回“48.733,2.283”，而在执行“locationfound”之后，它返回“LatLng(48.73, 1.36401)”。我该如何分离纬度和经度？谢谢。 - floflo

纬度：(e.latlng[0]||e.latlng.lat) 经度：(e.latlng[1]||e.latlng.lng) - Dr.Molle

非常感谢，我会尝试。我用了一些不太优美的代码解决了：if(e.latlng.lat){latitude = e.latlng.lat, longitude = e.latlng.lng} else{latitude = glcl.latitude, longitude = glcl.longitude} - floflo

在尝试结合标记拖动使用SmoothMarkerBouncing插件时，了解这一点非常有用。在浏览器内拖动标记看起来很好，但是随后触发弹跳事件将会重置标记到其初始位置，除非在拖动结束后应用此重置，即marker.setLatLng(newLatLng)。 - Mr Davros

Answer 2

我建议尝试使用标记方法中的update()，它对我有效。

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

- Kedar.Aitawdekar