Korzystając z interfejsu API Map Google w wersji 3, jak programowo zmienić ikonę znacznika?
Chciałbym, aby ktoś najechał kursorem na link - aby odpowiednia ikona znacznika na mapie zmieniła kolory, aby wskazać dany znacznik.
Zasadniczo ta sama funkcja, co Roost.
Gdy najedziesz kursorem na listę domu po lewej stronie, odpowiedni znacznik po prawej stronie zmieni kolor
Odpowiedzi:
Nazywamy
marker.setIcon('newImage.png')
... Spójrz tutaj na docs.Pytasz, jak to zrobić? Możesz po prostu utworzyć każdy z nich
div
i dodać odbiornikmouseover
imouseout
, który zmieni ikonę iz powrotem dla znaczników.źródło
markersArray[0].setAnimation(google.maps.Animation.BOUNCE);
Możesz również użyć koła jako ikony znacznika, na przykład:
a następnie, jeśli chcesz zmienić znacznik dynamicznie (jak po najechaniu myszą), możesz na przykład:
źródło
Ten wątek może być martwy, ale StyledMarker jest dostępny dla API v3. Po prostu połącz żądaną zmianę koloru z odpowiednim zdarzeniem DOM za pomocą metody addDomListener () . Ten przykład jest bardzo zbliżony do tego, co chcesz zrobić. Jeśli spojrzysz na źródło strony, zmień:
na coś takiego:
To powinno wystarczyć, abyś się ruszył.
Strona Wikipedii w DOM Events pomoże Ci również wybrać zdarzenie, które chcesz przechwycić po stronie klienta.
Powodzenia (jeśli nadal go potrzebujesz)
źródło
Utility Library GMaps ma plugin o nazwie MapIconMaker który ułatwia generowanie różnych stylów znacznik na bieżąco. Używa Google Charts do rysowania znaczników.
Jest tutaj dobre demo , które pokazuje, jakie rodzaje markerów możesz za jego pomocą zrobić.
źródło
Możesz wypróbować ten kod
źródło