Kuinka muuttaa Google Maps -merkkien väriä JavaScriptillä

Tee niistä vaaleanpunainen, sininen, vihreä, keltainen tai violetti!

Oletusarvon mukaan Google Maps -merkintä on väriltään punainen. Tässä artikkelissa kerrotaan, kuinka erivärimerkkejä lisätään Google Mapsiin. Joten, aloitetaan. ?

1. Lataa Google Maps

Luo HTML-tiedosto, joka lataa Google Mapsin seuraamalla Google Maps -sovellusliittymän virallisia asiakirjoja: Hello World.

Koodisi näyttää olevan alla olevan koodinpätkän kaltainen.

Huomaa: Muista vaihtaa YOUR_API_KEYtodelliseen Google Maps -sovellusliittymäavaimeen.

2. Lisää erilaisia ​​värimerkkejä

Sinisen värimerkin lisäämiseksi meidän on vaihdettava merkin kuvake. Tämä tehdään lisäämällä kuvakeominaisuus ja määrittämällä sille URL-osoite kuten alla.

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

Huomaa, että määritämme blue-dot.pngURL-osoitteen lopussa saadaksesi sinisen merkin. Jos haluat lisätä vihreän merkin, vaihda se green-dot.pngsiten, että URL-osoite on //maps.google.com/mapfiles/ms/icons/green-dot.png.

Joitakin muita värejä:

  1. vaaleanpunainen: pink-dot.png
  2. keltainen: yellow-dot.png
  3. violetti: purple-dot.png

Saat lisää merkkikuvakkeiden URL-osoitteen tutustumalla tähän verkkosivustoon.

3. Kääri lisämerkintöihin

Koodin puhdistamiseksi voimme määrittää addMarkertoiminnon, joka vie merkin sisään latLngja colorsen. Huomaa, että tallennamme lisätyt merkinnät globaaliin markersArray, jos meidän on tehtävä mitään toimintoja myöhemmin.

Avaa HTML-tiedosto selaimessa. Sen pitäisi näyttää tältä:

Saat koodin täydellisen lopullisen version täältä. Kerro minulle, miten se tapahtuu alla olevissa kommenteissa.

Voit vapaasti tarkistaa toisen kirjoittamani Google Maps -opetusohjelman:

Toteuta napsauttamalla JavaScriptiä Google Map, jotta voit lisätä vedettäviä merkkejä viivalla