Możesz dynamicznie żądać obrazów ikon z interfejsu Google wykresów za pomocą adresów URL:
http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|FE7569
Który wygląda tak: obraz ma wymiary 21 x 34 pikseli, a końcówka szpilki znajduje się w pozycji (10, 34)
Będziesz także potrzebować osobnego obrazu cienia (aby nie nachodził na ikony w pobliżu):
http://chart.apis.google.com/chart?chst=d_map_pin_shadow
Który wygląda tak: obraz ma wymiary 40 x 37 pikseli, a końcówka szpilki znajduje się w pozycji (12, 35)
Podczas konstruowania MarkerImage musisz odpowiednio ustawić rozmiar i punkty kontrolne:
var pinColor = "FE7569";
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
Następnie możesz dodać znacznik do swojej mapy za pomocą:
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0,0),
map: map,
icon: pinImage,
shadow: pinShadow
});
Po prostu zastąp „FE7569” kodem koloru, którego szukasz. Na przykład:
Podziękowania za inspirację dla Jacka B Nimble ;)
Jeśli korzystasz z Google Maps API v3, możesz użyć
setIcon
npLub jako część znacznika init:
Inne kolory:
Użyj poniższego kodu, aby zaktualizować domyślne markery w różnych kolorach.
źródło
Oto fajne rozwiązanie przy użyciu samego interfejsu API Map Google. Bez usług zewnętrznych, bez dodatkowej biblioteki. Umożliwia niestandardowe kształty oraz wiele kolorów i stylów. Rozwiązanie wykorzystuje wektorowe markery, które GoogleMaps wywołań API Symbole .
Oprócz kilku i ograniczonych predefiniowanych symboli, możesz stworzyć dowolny kształt dowolnego koloru, określając ciąg ścieżki SVG ( Spec ).
Aby go użyć, zamiast ustawiać opcję znacznika „ikona” na adresie URL obrazu, ustaw go na słownik zawierający opcje symboli. Jako przykład udało mi się stworzyć jeden symbol, który jest dość podobny do standardowego znacznika:
Uważam, aby zachować kluczowy punkt kształtu na 0,0, aby uniknąć konieczności definiowania parametrów centrowania ikony znacznika. Kolejny przykład ścieżki, ten sam znacznik bez kropki:
A tutaj masz bardzo prostą i brzydką kolorową flagę:
Możesz także tworzyć ścieżki za pomocą wizualnego narzędzia, takiego jak Inkscape (GNU-GPL, multiplatform). Kilka przydatnych wskazówek:
źródło
Cóż, najbliższą rzeczą, jaką udało mi się uzyskać dzięki StyledMarker, jest to .
Kula pośrodku nie jest jednak tak duża jak domyślna. Klasa StyledMarker po prostu buduje ten adres URL i prosi interfejs API Google o utworzenie znacznika .
Z Przykład użycia klasy użytkowania „% E2% 80% A2” jako tekstu, na przykład:
Będziesz musiał zmodyfikować StyledMarker.js, aby skomentować linie:
ponieważ spowoduje to przycięcie ciągu tekstowego do 2 znaków.
Alternatywnie możesz utworzyć niestandardowe obrazy znaczników na podstawie domyślnego z pożądanymi kolorami i zastąpić domyślny znacznik kodem takim jak ten:
źródło
Rozszerzyłem nieco odpowiedź vokimona , dzięki czemu jest nieco wygodniejsza do zmiany innych właściwości.
Stosowanie:
Lub podczas definiowania nowego znacznika:
źródło
Cześć, możesz użyć ikony jako SVG i ustawić kolory. Zobacz ten kod
źródło
od wersji 3.11 interfejsu API map Google,
Icon
obiekt zastępujeMarkerImage
. Ikona obsługuje te same parametry, co MarkerImage. Uważam nawet, że jest to nieco prostsze.Przykład może wyglądać następująco:
w celu uzyskania dalszych informacji sprawdź tę stronę
źródło
źródło
Jak wspomnieli inni, odpowiedź vokimona jest świetna, ale niestety Mapy Google działają nieco wolno, gdy jednocześnie dostępnych jest wiele znaczników opartych na SymbolPath / SVG.
Wygląda na to, że użycie identyfikatora URI danych jest znacznie szybsze, mniej więcej na poziomie PNG.
Ponadto, ponieważ jest to pełny dokument SVG, możliwe jest użycie odpowiedniego wypełnionego koła dla kropki. Ścieżka jest modyfikowana, więc nie jest już przesunięta w lewy górny róg, więc kotwica musi zostać zdefiniowana.
Oto zmodyfikowana wersja, która generuje te znaczniki:
Stosowanie:
Minusem, podobnie jak obraz PNG, jest to, że można kliknąć cały prostokąt. Teoretycznie nie jest trudno prześledzić ścieżkę SVG i wygenerować wielokąt MarkerShape .
źródło
Możesz użyć tego kodu, działa dobrze.
źródło
Połącz znacznik symboliczny, którego ścieżka rysuje kontur, ze znakiem „●” na środku. Możesz zastąpić kropkę innym tekstem („A”, „B” itp.) Według potrzeb.
Ta funkcja zwraca opcje znacznika z danym tekstem (jeśli istnieje), kolorem tekstu i kolorem wypełnienia. Używa koloru tekstu dla konturu.
źródło
Próbuję utworzyć dwa niestandardowe znaczniki mapy google, przy użyciu tego kodu uruchomienia canvg.js to najlepsza kompatybilność z przeglądarką. Skomentowany kod nie obsługuje natychmiast IE11.
źródło
Przez długi czas starałem się poprawić znacznik narysowany vokimona i uczynić go bardziej podobnym do tego z Google Maps (i prawie się udało). Oto kod, który mam:
Skalowałem go również o 0,8.
źródło
zmień go na chart.googleapis.com jako ścieżkę, w przeciwnym razie SSL nie będzie działać
źródło
Używając swift i Google Maps Api v3, był to najłatwiejszy sposób, w jaki mogłem to zrobić:
mam nadzieję, że to komuś pomoże.
źródło
Są to niestandardowe markery kołowe
small_red:
mały_żółty:
mała_zielona:
small_blue:
small_purple:
Są to obrazy 9 x 9 png.
Gdy znajdą się na twojej stronie, możesz po prostu przeciągnąć je, a będziesz mieć rzeczywisty plik png.
źródło
Możesz także użyć kodu koloru.
źródło
Czasami na coś naprawdę prostego można odpowiedzieć złożonym. Nie twierdzę, że żadna z powyższych odpowiedzi jest niepoprawna, ale chciałbym tylko zastosować, że można to zrobić tak prosto:
Wiem, że to pytanie jest stare, ale jeśli ktoś chce po prostu zmienić kolor pinezki lub znacznika, zapoznaj się z dokumentacją: https://developers.google.com/maps/documentation/android-sdk/marker
po dodaniu znacznika wystarczy ustawić właściwość icon:
Do wyboru jest 10 kolorów domyślnych . Jeśli to nie wystarczy (proste rozwiązanie), prawdopodobnie wybrałbym bardziej złożony podany w innych odpowiedziach, spełniając bardziej złożoną potrzebę.
ps: Napisałem coś podobnego w innej odpowiedzi i dlatego powinienem odnieść się do tej odpowiedzi, ale ostatnim razem, gdy to zrobiłem, poproszono mnie o opublikowanie odpowiedzi, ponieważ była tak krótka (jak ta) ..
źródło