Vue.js + API Карт Google: получение местоположения пользователя

HTML5 Geolocations API и Google Geocoding API

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

В этой статье я быстро расскажу, как определить местоположение пользователя с помощью геолокации HTML5 и API геокодирования Google в проекте vue.js.

Я предполагаю, что вы уже знаете, как начать работу с проектом vue.js.

Структура папок должна быть такой:

Создайте компонент vue с именем UserLocation.vue внутри папки компонента, а также определите объект маршрута внутри файла router / index.js.

Внутри компонента UserLocation.vue добавьте следующий код.

<template>
  <section class="ui two column centered grid">
    <div class="column">
      <form class="ui segment large form">
          <div class="field">
            <div class="ui right icon input large">
              <input
                type="text"
                placeholder="Enter your address"
                v-model="address"
                ref="autocomplete"
              />
              <i class="dot circle link icon" @click="locatorButtonPressed"></i>
            </div>
        </div>
      </form>
    </div>
  </section>
</template>

И вид будет выглядеть так.

Как видите, справа есть поле ввода с кнопкой, а также несколько элементов, создающих макет на основе сетки с использованием семантической среды CSS.

Я уже добавил семантическую ссылку на CDN в пользовательском интерфейсе внутри файла index.html.

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

Давайте определим их.

Получение географических координат пользователя с помощью API геолокации HTML5

Чтобы получить географические координаты (широту и долготу), вызовите метод getCurrentPosition () для объекта навигатора.

locatorButtonPressed() {
  navigator.geolocation.getCurrentPosition(
     position => {
       console.log(position.coords.latitude);
       console.log(position.coords.longitude);
     },
     error => {
       console.log(error.message);
     },
  )   
}

Метод GetCurrentPosition () принимает несколько аргументов.

Первый - это функция обратного вызова успеха, которая возвращает объект, координаты которого указаны в параметре с именем position.

Второй - функция обратного вызова ошибки.

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

Довольно прямолинейно.

Преобразование координат в адрес улицы с помощью API геокодирования

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

Но мы хотим ... Обратное геокодирование, то есть процесс преобразования географических координат в удобочитаемый адрес.

Чтобы использовать этот API, вам необходимо получить ключ от облачной платформы Google и включить API геокодирования и JavaScript API Карт.

Давайте сделаем HTTP-запрос к API геокодирования с помощью HTTP-клиента Axios.

Для этого создайте еще одну функцию с именем getStreetAddressFrom (lat, long) с параметрами внутри объекта методов.

async getStreetAddressFrom(lat, long) {
  try {
    var { data } = await axios.get(
      "https://maps.googleapis.com/maps/api/geocode/json?latlng=" +
        lat +
        "," +
        long +
        "&key={yourAPIKey}"
    );
    if(data.error_message) {
      console.log(data.error_message)
    } else {
      this.address = data.results[0].formatted_address;
    }
  } catch (error) {
    console.log(error.message);
  } 
}

Как видите, я использую шаблон Async и Await в getStreetAddressFrom (), а внутри блока try делаю HTTP-запрос к API геокодирования с помощью Axios с парой параметров запроса.

Первый параметр - это широта и долгота, и его значением будут широта и долгота, которые передаются в функцию и ключ API.

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

Последний шаг - вызвать эту функцию внутри функции успешного обратного вызова метода getCurretnPosition ().

locatorButtonPressed() {
  navigator.geolocation.getCurrentPosition(
    position => {
      this.getStreetAddressFrom(position.coords.latitude, position.coords.longitude)
    },
    error => {
      console.log(error.message);
    }
  );
},

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

Чтобы предотвратить кражу квоты, вы можете ограничить ключ API, разрешив только определенные домены.

Идите и отредактируйте свой ключ…

Что затем открывает это:

В приложении Ограничения → Добавить элемент и введите адрес веб-сайта, который хочет использовать только этот ключ API.

Вы можете получить эту ошибку в консоли браузера:

You must enable Billing on the Google Cloud Project at https://console.cloud.google.com/project/_/billing/enable Learn more at https://developers.google.com/maps/gmp-get-started

Чтобы API геокодирования работал, необходимо включить биллинг, иначе он не будет работать.

Перейдите в Google Cloud Console - ›Выберите проект -› Выберите Billing на боковой панели - ›Добавить биллинг

Хороший! Вот и все ... однако мы еще не закончили.

Автозаполнение

В некоторых крайних случаях пользователь должен вводить свой адрес вручную. Например, пользователь отказывается делиться своим местоположением или API геолокации HTML5 не поддерживает его браузер.

Благодаря библиотеке автозаполнения, которая является частью библиотеки Google Places в Maps JavaScript API.

Автозаполнение предложит адреса в раскрывающемся списке, когда пользователь начнет вводить свой адрес.

Для начала добавьте URL-адрес API автозаполнения JavaScript в index.html.

Это принимает два параметра запроса. Первая - это библиотека, которую я хочу использовать в данном случае. мест, так как автозаполнение является его частью. Второй - это API-ключ.

Внутри компонента UserLocation.vue добавьте следующий код внутри функции mount ().

Создайте экземпляр метода Autocomplete для размещения объектов внутри функции connected (), передав элемент ввода, используя this. $ Refs [«autocomplete»].

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

если это не работает, убедитесь, что вы включили библиотеки Maps JavaScript API и Places API в Google Cloud Console.

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

Удачного кодирования!