2013-03-29 11 views
6

mio Django web app dovrebbe effettuare le seguenti operazioni: Passare un oggetto GeoJSON ad una vista, mappare i punti con depliant e visualizzare alcune informazioni aggiuntive quando l'utente fa clic su un marcatore punto. Io non sono così familiarità con js così mi sono bloccato vincolante il giusto tipo di dati da click evento. Ecco un esempio di oggetto geojson. Come posso accedere all'ID con il mio evento click?JS volantino: Come passare (Geo) ID JSON per l'evento click?

var geojsonFeature = {'geometry': 
          {'type': 'MultiPoint', 
          'coordinates': [[4.939, 52.33], [4.9409, 52.33]] 
          }, 
        'type': 'Feature', 
        'properties': 
         {'id': '52','popupContent': 'id=52'} 
        }; 

Aggiunta l'oggetto GeoJSON alla mappa ..

var gj = L.geoJson(geojsonFeature, { 
    pointToLayer: function (feature, latlng) { 
    return L.circleMarker(latlng, geojsonMarkerOptions); 
    }}).addTo(map); 

E il on() -cliccare ....

gj.on('click', function(evt) { 
    alert(id) // well, this is where I need help 
}); 

NOTA: Non voglio usare qualcosa come bindPopup(feature.properties.popupContent) perché voglio aprire una nuova finestra che chiama una diversa visualizzazione Django con alcuni dati aggiuntivi dal database.

risposta

13

per tutti con un problema simile: Che cosa si vuole utilizzare è la funzione onEachFeature. La funzione rappresenta un oggetto geojson. È possibile accedere ai dati di esempio forniti sopra all'ID tramite feature.properties.popupContent.

function onEachFeature(feature, layer) { 
    layer.on('click', function (e) { 
     alert(feature.properties.popupContent); 
     //or 
     alert(feature.properties.id); 
    }); 
} 
+0

amo amici dopo aver avuto una ricerca di una notte ho ottenuto questa risposta. –

2

Dopo aver provato la soluzione postato sopra senza successo, ho avuto questa versione al lavoro:

function onEachFeature(feature, layer) { 
    layer.on('click', function (e) { 
     alert(e.target.feature.properties.popupContent); 
     //or 
     alert(e.target.feature.properties.id); 
    }); 
} 
Problemi correlati