Używam interfejsu API Map Google do tworzenia mapy pełnej znaczników, ale chcę, aby jeden znacznik wyróżniał się spośród innych. Myślę, że najłatwiej byłoby zmienić kolor markera na niebieski zamiast czerwonego. Czy to prosta rzecz, czy muszę jakoś stworzyć zupełnie nową ikonę? Jeśli muszę utworzyć nową ikonę, jaki jest najłatwiejszy sposób, aby to zrobić?
google-maps
google-maps-api-2
abeger
źródło
źródło
Odpowiedzi:
Ponieważ mapy v2 są przestarzałe, prawdopodobnie interesują Cię mapy v3: https://developers.google.com/maps/documentation/javascript/markers#simple_icons
Mapy v2:
http://code.google.com/apis/maps/documentation/overlays.html#Icons_overview
Miałbyś jeden zestaw logiki wykonujący wszystkie „zwykłe” piny, a inny, który wykonuje „specjalne” piny, używając nowego zdefiniowanego znacznika.
źródło
W wersji 3 interfejsu API Map Google najłatwiejszym sposobem jest pobranie niestandardowego zestawu ikon, takiego jak ten, który stworzył tutaj Benjamin Keen:
http://www.benjaminkeen.com/?p=105
Jeśli umieścisz wszystkie te ikony w tym samym miejscu co strona mapy, możesz pokolorować znacznik, używając po prostu odpowiedniej opcji ikony podczas jego tworzenia:
Jest to bardzo łatwe i właśnie takiego podejścia używam w projekcie, nad którym obecnie pracuję.
źródło
MapIconMaker: biblioteka dla Google Maps v2
Jednym ze sposobów jest użycie
MapIconMaker(deadlink). Jest przykłademtutaj(DeadLink). Domyślne ikony Map Google mają szerokość 20 pikseli i wysokość 34 pikseli, więc możesz użyć czegoś takiego do emulacji:Możesz nawet zawinąć go w jakąś funkcję, aby jeszcze bardziej ułatwić sobie pracę:
Tego osobiście używam do wszystkich tworzonych przeze mnie markerów. Wolę mieć możliwość zmiany kolorów dla kaprysu.
Aktualizacja: Domyślna ikona w kolorze Hex to „# FE7569”. Możesz także ustawić Obraz na Markerze zamiast tworzyć nowy Marker z nową ikoną. Więc jeśli chcesz, aby funkcja się wyróżniała, możesz skorzystać z czegoś takiego, używając funkcji powyżej:
StyledMarker: biblioteka dla Map Google v3
Ponieważ V2 został kiedyś zastąpiony przez V3, pomyślałem, że powinienem zaktualizować tę odpowiedź. Utworzyłem bibliotekę niestandardowych markerów, którą można znaleźć w bibliotece narzędzi V3
tutaj(martwe łącze). Pozwala na różne kolory i kształty, a także możesz umieścić tekst na markerze. Działa przy użyciu interfejsu API Google Charts, który zawiera metody tworzenia znaczników typu Google Maps. Jeśli wolisz bezpośrednio korzystać z interfejsu API Google Charts, zajrzyj do kodu źródłowego.Problem w tej bibliotece polega jednak na tym, że dba ona o zdefiniowanie klikalnych obszarów tych obrazów znaczników za Ciebie, więc na przykład dłuższy bąbelek z tekstem będzie miał klikalne regiony, których się spodziewasz, jak w
tym przykładzie(martwe łącze).źródło
Wygląd materiału
EDYCJA MARZEC 2019 teraz z automatycznym kolorem pinezek
CZYSTY JAVASCRIPT, BEZ OBRAZÓW, WSPIERA ETYKIETY
nie polega już na wycofanym interfejsie Charts API
źródło
MapIconMaker
została już przestarzała.http
chyba że ujawnia coś, czego nie jestem świadomy w nagłówkuOsobiście uważam, że ikony generowane przez Google Charts API wyglądają świetnie i można je łatwo dynamicznie dostosowywać.
Zobacz moją odpowiedź w Google Maps API 3 - Niestandardowy kolor znacznika dla domyślnego znacznika (kropki)
źródło
Najprostszym sposobem, jaki znalazłem, jest użycie BitmapDescriptorFactory.defaultMarker (), dokumentacja zawiera nawet przykład ustawienia koloru. Z mojego własnego kodu:
źródło
Aby dostosować znaczniki, możesz to zrobić za pomocą tego narzędzia online: https://materialdesignicons.com/
W twoim przypadku potrzebujesz znacznika mapy, który jest dostępny tutaj: https://materialdesignicons.com/icon/map-marker i który możesz dostosować online.
Jeśli chcesz po prostu zmienić domyślny kolor czerwony na niebieski, możesz załadować tę ikonę: http://maps.google.com/mapfiles/ms/icons/blue-dot.png
Wspomniano o tym w tym wątku: https://stackoverflow.com/a/32651327/6381715
źródło
Ten stosunkowo nowy artykuł zawiera prosty przykład z ograniczonym zestawem kolorowych ikon w Mapach Google.
źródło