使用传单 API 更新标记位置

2022-01-12 00:00:00 leaflet javascript

我想使用 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).

我的问题是地图上的标记位置未更新，并且下面的代码失败且没有错误.我从 leaflet 文档 尝试了数百种不同的语法和方法来更新标记位置(即 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() 中按预期工作.

..should work as expected inside 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/

相关文章