2013-01-05 16 views
20

Desidero creare un'app Web con l'API Leaflet. Prima il mio utente viene geolocalizzato con IP quindi, se accetta, cerco di aggiornare la sua posizione con la geolocalizzazione HTML5 (la precisione è migliore).Posizione marcatore di aggiornamento con API libretto

Il mio problema è che la posizione del marcatore non viene aggiornata sulla mappa e il codice muggito fallisce senza errori. Ho provato centinaia di differenti sintassi e metodi da leaflet documentation per aggiornare la posizione del marcatore (ad esempio setLatLng) ma non ci sono riuscito. Mi piacerebbe capire cosa c'è di sbagliato nel mio codice.


mio problema è risolto facendo in questo modo:

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

vecchio codice era:

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

quando uso addto (mappa) si creo un nuovo marker ma nessun aggiornamento di quello esistente. Qualche idea ? – floflo

risposta

30

Il codice all'interno della vostra domanda è un po 'di confusione, è difficile dire cosa il problema è quando pubblichi solo frammenti.

Così com'è, questo codice:

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

lavoro ..should come previsto all'interno onLocationFound().

È possibile semplificare:

marker.setLatLng(e.latlng); 

Tuttavia, credo che il problema è un ambito a tema, alcune delle variabili (per esempio marcatore) non è accessibile all'interno onLocationFound.

Ecco un esempio di come realizzarla:

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/

+0

Grazie, è molto istruttivo come lo si codifica. – floflo

+0

Ho un problema con "e.latlng". Dopo 'glcl' viene eseguito 'e.latlng' return '48 .733,2.283 'e dopo che' locationfound 'è eseguito restituisce' LatLng (48.73, 1.36401) '. Come posso separare latitudine e longitudine? grazie – floflo

+0

latitude: '(e.latlng [0] || e.latlng.lat)' longitudine: '(e.latlng [1] || e.latlng.lng)' –

5

Prova update() del metodo di marcatore funziona per me

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