使用传单API更新标记位置 [英] update marker location with leaflet API

问题描述

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

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

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

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 documentation to update marker position (ie. setLatLng) but I did not succeed. I would like to understand what's wrong with my code.

我的问题通过以下方式解决：

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

旧代码是：

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

推荐答案

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

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

实际上，这段代码：

    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里面无法访问。

However, I guess the problem is a scope-issue, some of your variables (e.g. marker) is not accessible inside 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();
} 

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

这篇关于使用传单API更新标记位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！