Как изменить цвет маркеров Google Maps с помощью JavaScript

1656577210 kak izmenit czvet markerov google maps s pomoshhyu javascript

от Тан Ле Тянь

Сделайте их розовыми, голубыми, зелеными, желтыми или фиолетовыми!

1*d635FJj7G3ZEAZdyLUaeSg

Маркер Карт по умолчанию имеет красный цвет. В этой статье будет показано, как добавить маркеры разных цветов в Google Maps. Итак, начнём. ?

1. Загрузите Google Maps

Создайте файл HTML, который загружает Карты Google, следуя официальным документам API Карт Google: Hello World.

Ваш код будет выглядеть примерно так, как фрагмент кода ниже.

Примечание: Не забудьте изменить YOUR_API_KEY к вашему фактическому ключу API Карт Google.

2. Добавьте маркеры разных цветов

Чтобы добавить маркер синего цвета, необходимо изменить значок маркера. Для этого добавляется свойство icon и указывается URL-адрес, как показано ниже.

icon: {                               url: "                           }

Заметим, что мы указываем blue-dot.png в конце URL, чтобы получить синий маркер. Чтобы добавить зеленый маркер, просто измените его на green-dot.png так что URL будет .

Некоторые другие доступные цвета:

  1. розовый: pink-dot.png
  2. желтый: yellow-dot.png
  3. фиолетовый: purple-dot.png

Чтобы получить URL-адреса других значков маркеров, перейдите на этот веб-сайт.

3. Заверните функцию добавления маркера.

Чтобы сделать код чище, мы можем определить an addMarker функция, которая берет на себя latLng и color маркера. Обратите внимание, что мы сохраняем маркеры, добавленные в глобальном файле markersArray на случай если позже нам понадобится выполнить любые операции с маркерами.

Откройте файл HTML в обозревателе. Это должно выглядеть так:

1*vkqPZHbgS4iz9zOtVKvf6g

Полную окончательную версию кода можно получить здесь. Пожалуйста, сообщите мне, как это происходит, в комментариях ниже.

Не стесняйтесь ознакомиться с другим учебником Google Maps, который я написал:
Примените щелкните JavaScript Google Map, чтобы добавить маркеры с полилинией, которые можно перетаскивать

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *