web-dev-qa-db-fra.com

mettre à jour l'emplacement du marqueur avec l'API du dépliant

Je veux créer une application Web avec l'API Leaflet. D'abord mon utilisateur est géolocalisé avec IP puis s'il accepte j'essaye de mettre à jour sa position avec la géolocalisation HTML5 (la précision est meilleure).

Mon problème est que la position du marqueur n'est pas mise à jour sur la carte et le code ci-dessous échoue sans erreur. J'ai essayé des centaines de méthodes et syntaxes différentes de documentation de la brochure pour mettre à jour la position du marqueur (ie. SetLatLng) mais je n'ai pas réussi. Je voudrais comprendre ce qui ne va pas avec mon code.

Mon problème est résolu en faisant comme ceci:

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

L'ancien code était:

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

Le code dans votre question est un peu déroutant, il est difficile de dire quel est le problème lorsque vous ne publiez que des extraits de code.

En l'état, ce code:

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

..devrait fonctionner comme prévu dans onLocationFound().

Vous pouvez le simplifier:

marker.setLatLng(e.latlng);

Cependant, je suppose que le problème est un problème de portée, certaines de vos variables (par exemple le marqueur) ne sont pas accessibles dans onLocationFound.

Voici un exemple comment y parvenir:

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

Démo: http://jsfiddle.net/doktormolle/6ftGz/

47
Dr.Molle

Essayez pdate () de la méthode de marqueur, cela fonctionne pour moi

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