Карта, Маркеры, InfoWindow, Событие

Приложение CloseBuy делает следующее:

  • Он определяет местоположение пользователя с помощью API геолокации HTML5.
  • Он получает близлежащие места в зависимости от местоположения пользователя, отправляя HTTP-запрос к API мест.
  • Он показывает их слева в виде списка
  • Он отображает их на карте с помощью маркеров.
  • Он показывает информационное окно (выноска), когда нажимается маркер для получения дополнительной информации.

начнем.

Я предполагаю, что вы уже знаете:

  • Как запустить проект с vue.js, используя Vue CLI.

Как только проект Vue запущен и запущен, создайте компонент на основе страницы внутри папки pages с именем CloseBuy.vue и установите для него маршрут.

Наше финальное приложение CloseBuy имеет три компонента представления пользовательского интерфейса, а именно:

Я мог бы создать три отдельных компонента vue для каждого модуля пользовательского интерфейса, но для простоты я собираюсь поместить весь код в компонент на основе одной страницы.

Форма ввода пользователя с использованием семантического пользовательского интерфейса

Давайте создадим макет сетки из двух столбцов с помощью CSS-фреймворка Semantic UI.

Вот ссылка CDN для него.

В компоненте CloseBuy.vue добавьте следующий код между тегами шаблона.

Внутри левого столбца добавьте HTML-разметку для модуля «Форма пользовательского ввода».

Как видно из шаблона, форма пользовательского ввода имеет три основных элемента с полем класса, а именно:

  • Поле Ввод со значком локатора справа.
  • Поле Type, представляющее собой раскрывающийся список с одним вариантом ресторан.
  • Поле Радиус, которое также представляет собой раскрывающийся список с несколькими параметрами.

Поле ввода привязано к coordinates вычисляемому свойству, а кнопка локатора имеет событие щелчка с функцией обратного вызова locatorButtonPressed.

Раскрывающиеся элементы Тип и Радиус привязаны к свойствам type и radius соответственно в модели data().

Теперь я собираюсь получить местоположение пользователя в виде географических координат при нажатии кнопки локатора.

Итак, внутри объекта методов объявите функцию locatorButtonPressed().

Я использую HTML5 Geolocation API для получения географических координат.

Итак, вызовите getCurrentPosition() method для объекта geolocation и получите значения широты и долготы из объекта position.

Затем назначьте их свойствам lat и lng, объявленным в модели data().

На этом этапе будет задано вычисляемое свойство coordinates, и вы сможете увидеть значения в поле ввода.

Вы можете преобразовать значения широты и долготы в реальный удобочитаемый почтовый адрес, используя геолокацию Google.Vue.js + API Карт Google: получение местоположения пользователя [адрес улицы]

Наконец, прикрепите событие щелчка к кнопке «Найти CloseBuy» с помощью функции обратного вызова с именем findCloseBuyButtonPressed и объявите ее внутри объекта методов.

Здесь я собираюсь сделать HTTP-вызов, чтобы получить близлежащие места, используя поисковый запрос поблизости.

Запрос поиска поблизости является частью Google Places API и позволяет нам получать места поблизости на основе:

  • местоположение пользователя в виде широты и долготы.
  • Тип (ресторан, бар и т. д.)
  • Радиус

Чтобы сделать HTTP-запрос, установите Axios в проект Vue, который является HTTP-клиентом.

npm install axios — save

Затем импортируйте Axios вверху

import axios from "axios";

Внутри функции findCloseBuyButtonPressed() я добавил ссылку CORS Heroku перед БАЗОВЫМ URL-адресом поиска поблизости, чтобы избежать проблемы с CORS.

Затем сделайте HTTP-запрос, запустив метод get() для объекта Axios с URL-адресом в качестве аргумента.

URL-адрес запроса поиска поблизости будет принимать четыре обязательных параметра запроса, а именно:

  • местоположение: широта и долгота, разделенные запятой.
  • тип: Рестораны, бары и т. д. Полный список типов можно найти здесь.
  • радиус: единица измерения должна быть в метрах. Таким образом, значение будет 5000, если это диапазон 5 км.
  • key: ваш ключ API от Google Cloud Platform.

Объект ответа будет иметь до 20 мест в виде массива объектов. Назначьте его свойству places, определенному в модели data().

Places API также предлагает получение мест/местоположений на основе текстового поиска. API Places: получение мест с помощью текстового поиска

Показать список мест

Когда у нас есть массив объектов места, мы можем отобразить их в левом столбце в формате списка под формой пользовательского ввода.

Чтобы показать места, добавьте следующий HTML-код сразу после закрывающего тега </form>.

Прокрутите массив мест, используя v-for, и отображайте имя и адрес места на каждой итерации.

И вид будет таким.

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

Добавить места на карты Google

Вызовите функцию showPlacesOnMap(), где мы получим ответ от Nearby Search Request.

Внутри функции создайте экземпляр объекта карты Google Maps и назначьте его переменной map.

Затем выполните цикл по массиву мест, используя функцию высшего порядка forEach.

Я использую цикл forEach вместо цикла for, чтобы избежать проблем с областью видимости переменных.

Внутри каждой итерации создайте новый экземпляр объекта маркера с парой параметров.

  • position: местоположение в виде широты и долготы, к которому вы хотите прикрепить маркер на карте.
  • карта: карта, на которую вы хотите добавить маркер.

И вы можете увидеть все маркеры, отображаемые на картах.

Хороший!

Давайте добавим событие щелчка к каждому из маркеров, чтобы отобразить информационное окно с некоторым содержимым в нем.

Сначала создайте экземпляр объекта InfoWindow() над циклом forEach.

var infowindow = new google.maps.InfoWindow();

Внутри цикла прикрепите событие щелчка к каждому маркеру, вызвав метод addListener() для объекта события.

В функции обратного вызова события щелчка добавьте имя и адрес местоположения, вызвав метод setContent() для объекта InfoWindow.

Наконец, используйте open() method для отображения информационного окна, передав два аргумента: карта и маркер.

Вот оно.

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

Спасибо за чтение.