API Google Map V3: come aggiungere dati personalizzati agli indicatori


117

C'è un modo per aggiungere alcune informazioni personalizzate ai miei marcatori per un uso successivo. Ci sono modi per avere una finestra informativa e un titolo, ma cosa succede se voglio associare il marcatore ad altre informazioni.

Ho altre cose visualizzate sulla pagina che dipendono dai marker, quindi quando si fa clic su un marker il contenuto della pagina deve cambiare a seconda di quale marker è stato cliccato.Vorrei memorizzare e recuperare i dati personalizzati una volta che un marker è, diciamo cliccato ecc.

Grazie

Risposte:


214

Poiché un indicatore di Google è un oggetto JavaScript, puoi aggiungere informazioni personalizzate nel modulo key: value, dove la chiave è una stringa valida. Sono chiamate proprietà dell'oggetto e possono essere utilizzate in molti modi diversi. Il valore può essere qualsiasi cosa legale, semplice come numeri o stringhe, e anche funzioni o anche altri oggetti. Tre semplici modi: nella dichiarazione, notazione punto e parentesi quadre

var markerA = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(0, 0),
    customInfo: "Marker A"
});

var markerB = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-10, 0)
});
markerB.customInfo = "Marker B";

var markerC = new google.maps.Marker({
    map: map,
    position: new google.maps.LatLng(-20, 0)
});
markerC['customInfo'] = "Marker C";

Quindi per recuperarlo in modo simile:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});

3
Non c'è niente nella documentazione che formalizza questo modello. Speriamo che lo facciano piuttosto che romperlo in una versione successiva.
Adam

1
La proprietà "customInfo" non esiste nel tipo "Marker".
alehn96

1
Se stai usando un dattiloscritto, potresti voler usare le parentesi piuttosto che il punto per assegnare tali proprietà
Cocoduf

14

Puoi aggiungere le tue proprietà personalizzate ai marcatori (fai solo attenzione a non entrare in conflitto con le proprietà dell'API).

Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.