Зробіть їх рожевими, синіми, зеленими, жовтими або фіолетовими!
За замовчуванням маркер Google Maps має червоний колір. У цій статті буде показано, як додати різні кольорові маркери на Карти Google. Отже, давайте почнемо. ?
1. Завантажте Google Maps
Створіть файл HTML, який завантажує Карти Google, дотримуючись офіційних документів API Карт Google: Hello World.
Ваш код буде виглядати приблизно як фрагмент коду нижче.
Примітка. Не забудьте змінити YOUR_API_KEYфактичний ключ API Карт Google.
2. Додайте різні кольорові маркери
Щоб додати синій кольоровий маркер, нам потрібно змінити піктограму маркера. Це робиться шляхом додавання властивості піктограми та вказівки URL-адреси для неї, як показано нижче.
icon: { url: "//maps.google.com/mapfiles/ms/icons/blue-dot.png" }Зверніть увагу, що ми вказуємо blue-dot.pngв кінці URL-адреси, щоб отримати синій маркер. Щоб додати зелений маркер, просто змініть його на, green-dot.pngщоб URL-адреса була //maps.google.com/mapfiles/ms/icons/green-dot.png.
Доступні деякі інші кольори:
- рожевий:
pink-dot.png - жовтий:
yellow-dot.png - фіолетовий:
purple-dot.png
Щоб отримати URL-адресу інших піктограм маркерів, відвідайте цей веб-сайт.
3. Оберніть у функцію додавання маркера
Щоб зробити код чистішим, ми можемо визначити addMarkerфункцію, яка приймає latLngі colorмаркер. Зверніть увагу, що ми зберігаємо маркери, додані в глобальному, markersArrayна випадок, якщо нам потрібно буде виконати якісь операції з маркерами пізніше.
Відкрийте файл HTML у браузері. Це повинно виглядати так:
Ви можете отримати повну остаточну версію коду звідси. Будь ласка, дайте мені знати, як це відбувається в коментарях нижче.
Не соромтеся ознайомитися з іншим підручником Google Maps, який я написав:
Введіть кнопку Google Map Google, щоб додати перетягувані маркери з полілінією