Карта, Маркеры, InfoWindow, Событие
Приложение CloseBuy делает следующее:
- Он определяет местоположение пользователя с помощью API геолокации HTML5.
- Он получает близлежащие места в зависимости от местоположения пользователя, отправляя HTTP-запрос к API мест.
- Он показывает их слева в виде списка
- Он отображает их на карте с помощью маркеров.
- Он показывает информационное окно (выноска), когда нажимается маркер для получения дополнительной информации.
начнем.
Я предполагаю, что вы уже знаете:
- Как запустить проект с vue.js, используя Vue CLI.
- Как получить ключ API из Google Cloud Console.
Как только проект 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 для отображения информационного окна, передав два аргумента: карта и маркер.
Вот оно.
Если у вас есть какие-либо вопросы, предложения по теме блога или отзывы, не стесняйтесь комментировать ниже, и я свяжусь с вами в ближайшее время.
Спасибо за чтение.