Пошаговое создание карты, маркеров и направления в Vue.js - моя обучающая заметка по Vue.js

Обзор

Карта Google потрясающая, мы можем найти дорогу, приехали на рабочее место, встретили меня с ней, но API карт Google еще лучше. Вы можете контролировать и собирать всю информацию где угодно и где угодно. Здесь мы изучили API Карт Google, найдя ресторан.

Прежде чем мы начнем, нам нужно подготовить некоторые инструменты:

  • Плагин Vue-Cli или Vue CDN (здесь мы используем Vue-Cli)
  • Базовый JavaScript
  • Bootstrap-Vue (для более эффективной демонстрации, а я ленив)
  • Google Project

Что касается Google Project, вам нужно перейти в Google Cloud Platform, чтобы подать заявку и создать новый проект, а затем выбрать API, который вы хотите использовать.

Затем вам нужно получить ключ API, чтобы узнать, как получить свой API: https://developers.google.com/places/web-service/get-api-key

После того, как вы создали свой проект и применили ключ API, добавьте этот код в Vue public ›index.html› head

Хороший! Теперь у нас достаточно инструментов, пора что-нибудь поесть. Давай найдем на карте хороший бургер!

Где где? Установить на карте

  1. Разверните карту

Чтобы найти что-нибудь на карте, мы должны создать карту в <template>. Вы должны установить контейнер для размещения карты и добавить элемент с именем «карта» в data. Затем в methods мы можем добавить функцию для запуска карты.

  • центр: центральная точка на карте (не маркер)
  • масштабирование: масштаб масштабирования по умолчанию (1–20, чем больше число, тем больше деталей)
  • minZoom и maxZoom: обычно мы устанавливаем 3–20, чтобы получить весь диапазон карты мира.
  • streetViewControl, mapTypeControl, fullscreenControl, zoomControl: элемент управления пользовательского интерфейса на карте.

2. У нас есть карта, но где я? Куда мы пойдем?

Хороший вопрос, здесь мы можем найти нашу текущую позицию и установить маркер на то место, где мы сейчас находимся. Чтобы найти свое текущее положение (широта, долгота), вы можете использовать HTML5 Geolocation для этого или просто найти точку с помощью информации Geopoint и использовать.

Затем мы настроим ресторан на ходу, мы можем установить еще одну Geopoint {lat:37.7928015,lng:-122.3940881}, это ресторан с гамбургерами недалеко от побережья. Тогда у нас есть начало и конец!

Вот несколько моментов, о которых нам следует позаботиться в функции установки маркера:

  • position: позиция, в которой вы должны установить маркер, тип - Object, например {lat:37.773972, lng:-122.431297}
  • карта: карта, на которую нужно поставить маркер
  • метка: текст, который можно вставить в маркер и изменить цвет

4. Я голоден, но это дерьмо должно быть поинтереснее

Теперь у нас есть начало и пункт назначения, но мы можем проделать некоторые небольшие трюки на нашей карте.

  • Другое изображение маркера

Вы можете изменить значок маркера, как вам нравится, в свойстве значка маркера Google, просто добавьте ссылку на изображение, как вам нравится, здесь.

  • Индивидуальный стиль карты

Вы можете создать свой собственный дизайн карты в Google Map Api, вот пример из официального Google показывает карту темного режима, вы можете следовать правилам стиля, чтобы изменить стиль своей карты. Кроме того, вы можете использовать редактор стилей карты Google, чтобы создать свой собственный стиль.

Найдите дорогу

Исключая начало и пункт назначения, единственный разрыв между нами и гамбургером - это маршрут. Здесь мы можем использовать «Направление», чтобы указать путь на нашей карте.

  1. Установить маршрут

Чтобы задать маршрут, нам нужно настроить нашу initMap() функцию. Мы будем называть DirectionsService() и DirectionsRenderer().

Затем мы должны изменить запрос, указав наш пункт отправления и назначения, а также способ передвижения.

Наконец, мы используем DirectionsService(), чтобы установить детали нашего маршрута, он покажет наше начало, пункт назначения и маршрут.

2. Лень гулять, все равно может помочь?

В Google Direction есть 4 способа сделать это на нашей карте:

  • “DRIVING”: На машине
  • “WALKING”: пешком
  • «BICYCLING”: При езде на велосипеде в этом режиме велосипедный маршрут отображается на карте.
  • “TRANSIT”: используйте общественный транспорт, например автобус или метро.

Мы можем переключить его с помощью аргумента функции в запросе направления и добавить кнопки переключения в наш шаблон

Результат похож на видео ниже:

В конце концов, с помощью карты Google мы поняли, какой вкус у гамбургера? Это моя самообучающаяся заметка о Vue.js. Если у вас есть какие-либо вопросы или мнения, так что рады сообщить мне и обсудить вместе, спасибо за чтение!