Google Map API V3: Jak dodać niestandardowe dane do znaczników

117

Czy istnieje sposób na dodanie niestandardowych informacji do moich znaczników do późniejszego wykorzystania? Istnieją sposoby na posiadanie okna informacyjnego i tytułu, ale co zrobić, jeśli chcę powiązać znacznik z innymi informacjami.

Na stronie są wyświetlane inne rzeczy, które zależą od markerów, więc po kliknięciu znacznika zawartość strony musi się zmienić w zależności od tego, który znacznik został kliknięty. Chciałbym przechowywać i pobierać niestandardowe dane po kliknięciu znacznika, powiedzmy kliknięte itp.

Dzięki

Oferta
źródło

Odpowiedzi:

214

Ponieważ Google Marker jest obiektem JavaScript, możesz dodać niestandardowe informacje w formularzu key: value, gdzie klucz jest prawidłowym ciągiem. Nazywa się je właściwościami obiektu i można do nich podchodzić na wiele różnych sposobów. Wartością może być dowolna dozwolona wartość, na przykład liczby lub ciągi znaków, a także funkcje, a nawet inne obiekty. Trzy proste sposoby: w deklaracji zapis z kropką i nawiasami kwadratowymi

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";

Następnie, aby odzyskać go w podobny sposób:

google.maps.event.addListener(markerA, 'click', function() {
    alert(this.customInfo);
});
Tina CG Hoehr
źródło
3
Nie ma nic w dokumentacji sformalizowanie tego wzorca. Mam nadzieję, że raczej to zrobią niż zepsują w późniejszej wersji.
Adam
1
Właściwość „customInfo” nie istnieje w typie „Marker”.
alehn96
1
Jeśli używasz maszynopisu, możesz użyć nawiasów, a nie kropki, aby przypisać takie właściwości
Cocoduf
14

Możesz dodać własne niestandardowe właściwości do znaczników (uważaj tylko, aby nie kolidować z właściwościami interfejsu API).

geocodezip
źródło