Примечание. Этот блог создан на основе библиотек vuejs2 и vue2-google-maps. Для понимания статьи необходимы предварительные знания об установке googlemap API, создании учетной записи, серийном ключе API и т. д. Кроме того, в этом разделе не рассматривается настройка npm и установка vuejs. Ниже приведены основные особенности контента:
- Установка пакетов npm и вспомогательных библиотек
- Создание хлебных крошек
- Создание многоцветных хлебных крошек с опциями
1. Установка пакетов npm и вспомогательных библиотек
[Предположим, что вы уже установили и настроили vuejs на своем локальном компьютере. ]
Чтобы добавить googlemap в проект vuejs, используйте командную строку для установки vue2-google-maps.
npm и vue2-google-maps
после успешной установкинеобходимо импортировать карты VueGoogleMaps в файлmain.js. Далее нужно добавить серийный ключ карты Google: добавьте существующий или создайте новый. Обратите внимание, что это будет связано с затратами, поэтому внимательно прочитайте условия. выможете продолжить работу без серийного ключа, и в этом случае карта будет отображаться в режиме разработки.
импортировать * как VueGoogleMaps из «vue2-google-maps»;
Создайте новый компонент, чтобы добавить googlemap в приложение vuejs. вы можете настроить размер карты с помощью атрибута «style» и установить уровень масштабирования. Имея в виду, что googlemap работает с координатами широты и долготы, выровняйте карту по нужному центру, установив широту и долготу.
К настоящему времени вы должны увидеть пустую карту.
2. Создание хлебных крошек
извлекаются и изображаются на карте для отслеживания следов объекта.
История координат широты/долготы является ключевым компонентом для построения хлебных крошек.
Для построения хлебных крошек нам нужно использовать встроенную функцию «ломаной линии», значка или формы, которую предлагает нам googlemap. В этом примере мы собираемся использовать полилинию.
‹GmapPolyline :path="orangeBreadCrumb" /›
Черная линия, которая появляется на карте, называется «ломаной».
Теперь, когда мы можем видеть, как полилиния использует широту/долготу для рисования линии на gmap. Мы могли видеть черную линию, добавленную в gmap, довольно скучно, как добавлять к ней стили gmap предлагает опции, которые мы можем установить различные опции. для получения дополнительной информации
https://developers.google.com/maps/documentation/javascript/examples/polyline-simple
3. Настройка хлебных крошек
Для того, чтобы дифференцировать или классифицировать хлебные крошки на основе определенной функции. Давайте посмотрим, как добавить несколько хлебных крошек с помощью полилинии. Вы можете составить свой компонент, добавив 3 раза GmapPolyline и различные параметры стиля для отдельных GmapPolyline соответственно.
Примечание. Приведенный выше код можно еще больше упростить, динамически визуализируя компоненты и зацикливая их вместо многократного жесткого кодирования.
Бонус: добавление маркера к начальной широте/долготе
Добавление маркера в начало координат широты/долготы с помощью gmap-marker
Я создал репозиторий github для того же. пожалуйста, посмотрите и дайте мне знать, если у вас есть какие-либо вопросы. Я постараюсь решить ваши вопросы.
Пример Live Demo можно посмотреть здесь.
https://codesandbox.io/s/young-sunset-vwm1m6?file=/index.html
