Hogyan lehet megváltoztatni a Google Maps jelölők színét JavaScript-sel

Tedd rózsaszínűvé, kéké, zöldé, sárgaé vagy lilává!

Alapértelmezés szerint a Google Maps jelölője piros színű. Ez a cikk bemutatja, hogyan lehet különböző színű jelölőket hozzáadni a Google Térképhez. Tehát kezdjük. ?

1. Töltse be a Google Térképet

Hozzon létre egy HTML fájlt, amely betölti a Google Térképet, a Google Maps API hivatalos dokumentumait követve: Hello World.

Kódja úgy néz ki, mint az alábbi kódrészlet.

Megjegyzés: Ne felejtse el megváltoztatni YOUR_API_KEYa tényleges Google Maps API-kulcsot.

2. Adjon hozzá különböző színű jelölőket

Kék színű jelölő hozzáadásához meg kell változtatnunk a jelölő ikonját. Ez úgy történik, hogy hozzáad egy ikon tulajdonságot, és megad egy hozzá tartozó URL-t, mint az alábbiak.

icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }

Ne feledje, hogy blue-dot.pngaz URL végén megadjuk , hogy kék jelölést kapjunk. Zöld jelölő hozzáadásához egyszerűen módosítsa úgy, green-dot.pnghogy az URL legyen //maps.google.com/mapfiles/ms/icons/green-dot.png.

Néhány egyéb elérhető szín:

  1. rózsaszín: pink-dot.png
  2. sárga: yellow-dot.png
  3. lila: purple-dot.png

Ha további jelölő ikonokat szeretne kapni, kérjük, keresse fel ezt a weboldalt.

3. Csomagolja be az add marker funkcióba

Ahhoz, hogy a kód tisztább, tudjuk meg egy addMarkerfunkció kerül a latLngés colora marker. Ne feledje, hogy a hozzáadott jelölőket egy globális tároljuk, arra az markersArrayesetre, ha később bármilyen műveletet el kellene végeznünk a jelölőkkel.

Nyissa meg a HTML fájlt a böngészőben. Így kell kinéznie:

A kód teljes végleges verzióját innen szerezheti be. Kérjük, tudassa velem, hogyan megy az alábbi megjegyzésekben.

Nézzen meg nyugodtan egy másik Google Maps oktatóanyagot, amelyet írtam:

Kattintson a JavaScript Google Map elemre, ha vonallal húzható jelölőket szeretne hozzáadni