Интеграция Google Maps в приложение Vue

Development, Java | Amber | Комментировать запись

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

Обновленный плагин vue-google-maps предоставляет приложениям Vue.js инструменты для использования этих API. С его помощью вы получаете хорошо продуманный набор компонентов для взаимодействия с Google Maps, а также для двусторонней привязки данных.

В этом мануале вы научитесь использовать библиотеку vue2-google-maps для создания карты, которая поддерживает автозаполнение адресного поля.

Требования

• Локальная установка Node.js (следуя этим инструкциям для mac OS, Ubuntu, Debian, CentOS).
• Вам может пригодиться базовое понимание создания проекта и компонентов Vue.js.
• JavasScript API ключ для Google Maps. Для этого потребуется:
  • Создать учетную запись Google.
  • Войти в консоль Google Cloud Platform.
  • Создать новый проект.
  • Включить Google Maps JavasScript API для этого проекта.
  • И создать учетные данные для ключа API.

Примечание: Чтобы не получать сообщения «For development purposes only» при использовании API Google Карт, необходимо предоставить действующую кредитную карту и связать ее с платежной учетной записью вашего проекта Google Cloud Project. Но для выполнения данного мануала этого делать не нужно.

Мануал протестирован на версиях Node 14.13.1, npm 6.14.8, vue v2.6.11 и vue2-google-maps v0.10.7.

1: Создание проекта

Для создания проекта Vue.js вы можете использовать @vue/cli.

Откройте окно терминала и введите такую команду:

npx @vue/cli create --default vue-google-maps-example

Команда использует стандартные конфигурации для создания проекта Vue.js.

Перейдите в только что созданный каталог проекта:

cd vue-google-maps-example

И запустите проект, чтобы убедиться, что он работает без ошибок.

npm run serve

Если вы посетите свое локальное приложение в браузере (обычно оно находится по адресу localhost:8080), вы увидите сообщение:

Welcome to Your Vue.js App

Создав базовое приложение, мы можем установить пакет vue2-google-maps.

2: Установка vue2-google-maps

Итак, сейчас вы установите пакет vue2-google-maps и добавите его в свой проект Vue.js.

Во-первых, vue2-google-maps нужно установить при помощи команды:

npm install vue2-google-maps@0.10.7

Откройте файл src/main.js в редакторе кода.

Импортируйте в него vue2-google-maps и создайте экземпляр плагина с помощью ключа API:

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'
import App from './App.vue'
Vue.config.productionTip = false

Vue.use(VueGoogleMaps, {

load: {

key: 'YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE',

libraries: 'places',

}

});
new Vue({
render: h => h(App),
}).$mount('#app')

Обязательно замените YOUR_GOOGLE_MAPS_API_KEY_GOES_HERE своим настоящим API-ключом. Также добавьте в файл библиотеку places, которая потребуется для поддержки функции автозаполнения адреса.

Важно! Не храните ключ API в файлах, которые включены в публичные репозитории (например, GitHub), иначе злоумышленник может найти его там и использовать в своих целях.

Итак, приложение поддерживает vue2-google-maps, значит, теперь мы можем создать пользовательский компонент для его использования.

3: Создание компонента поиска по карте

В этом разделе мы создадим новый компонент, который использует GmapMap, GmapAutocomplete и GmapMarker.

Откройте редактор кода и создайте компонент под названием GoogleMap.vue:

src/components/GoogleMap.vue

<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
</div>
</template>
<script>
export default {
name: 'GoogleMap'
}
</script>

При помощи того же редактора кода измените App.vue, чтобы он мог использовать этот новый компонент:

src/App.vue

<template>
<div id="app">
<GoogleMap />
</div>
</template>
<script>
import GoogleMap from './components/GoogleMap.vue'
export default {
name: 'App',
components: {
GoogleMap
}
}
</script>

Посетите свое приложение в веб-браузере, и вы должны увидеть сообщение:

Search and add a pin

Эта контрольная точка подтверждает, что пока что все работает правильно. Далее мы добавим остальные необходимые части для работы карты.

В учебных целях мы определим местоположение center стандартными координатами широты и долготы (по умолчанию это 45,508 и -73,587 соответственно, что совпадает с Монреалем, Канада). Параметр center – это исходная точка карты. Конечно, вы можете изменить эти значения, если хотите.

Добавьте компонент GmapMap и определите центр, масштаб и стиль карты (параметры center, zoom, style):

<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
<GmapMap

:center='center'

:zoom='12'

style='width:100%;  height: 400px;'

/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {

return {

center: { lat: 45.508, lng: -73.587 },

}

},
};
</script>

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

Давайте добавим геолокацию, чтобы узнать текущее местоположение пользователя и соответствующим образом обновить карту:

<template>
<div>
<div>
<h2>Search and add a pin</h2>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%;  height: 400px;'
/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
}
},
mounted() {

this.geolocate();

},

methods: {

geolocate: function() {

navigator.geolocation.getCurrentPosition(position => {

this.center = {

lat: position.coords.latitude,

lng: position.coords.longitude,

};

});

},

},
};
</script>

Снова откройте свое приложение в браузере. Теперь центром карты будет ваше местоположение.

Примечание: Возможно, браузер попросит разрешение использовать данные о вашей геолокации.

Затем мы добавим автозаполнение, чтобы карта могла обновлять местоположение пользователей:

<template>
<div>
<div>
<h2>Search and add a pin</h2>
<GmapAutocomplete

@place_changed='setPlace'

/>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%;  height: 400px;'
/>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
currentPlace: null,
}
},
mounted() {
this.geolocate();
},
methods: {
setPlace(place) {

this.currentPlace = place;

},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
});
},
},
};
</script>

Этот код добавит компонент GmapAutocomplete. Когда он обновляет значение place, вызывается setPlace и обновляет значение currentPlace.

Попробуйте снова открыть приложение в браузере, и вы увидите автоматически заполненное адресное поле, в котором будут перечислены местоположения. Если вам интересно, вы можете добавить console.log в setPlace, чтобы проверить значение переменной place.

После этого мы добавим метки для визуализации местоположений на карте:

<template>
<div>
<div>
<h2>Search and add a pin</h2>
<GmapAutocomplete
@place_changed='setPlace'
/>
<button

@click='addMarker'

>

Add

</button>
</div>
<br>
<GmapMap
:center='center'
:zoom='12'
style='width:100%;  height: 400px;'
>
<GmapMarker

:key="index"

v-for="(m, index) in markers"

:position="m.position"

@click="center=m.position"

/>
</GmapMap>
</div>
</template>
<script>
export default {
name: 'GoogleMap',
data() {
return {
center: { lat: 45.508, lng: -73.587 },
currentPlace: null,
markers: [],

places: [],
}
},
mounted() {
this.geolocate();
},
methods: {
setPlace(place) {
this.currentPlace = place;
},
addMarker() {

if (this.currentPlace) {

const marker = {

lat: this.currentPlace.geometry.location.lat(),

lng: this.currentPlace.geometry.location.lng(),

};

this.markers.push({ position: marker });

this.places.push(this.currentPlace);

this.center = marker;

this.currentPlace = null;

}

},
geolocate: function() {
navigator.geolocation.getCurrentPosition(position => {
this.center = {
lat: position.coords.latitude,
lng: position.coords.longitude,
};
});
},
},
};
</script>

Давайте посмотрим, что у нас получилось.

Итак, мы создали компоненты GmapAutocomplete и GmapMap (с дочерними компонентами GmapMarkers). Изначально карта центрирована на Монреале. После того, как экземпляр смонтируется, приложение вызывает geolocate и центрируется повторно – уже согласно вашему расположению.

Как только пользователь вводит поисковый запрос и выбирает что-то из выпадающего списка автоматически заполненных адресов, GmapAutocomplete вызывает setPlace. Выбранное значение затем сохраняется в currentPlace. При нажатии кнопки добавления вызывается метод addPlace, который сохраняет положение метки в markers, при этом обновляя GmapMap (а затем GmapMarkers). Значение center обновляется до позиции последней метки.

Кроме того, мы сохраняем полный объект place каждого места в свойстве places. Таким образом, в этом компоненте или любых дочерних компонентах можно по мере необходимости использовать дополнительные данные, возвращаемые из автозаполнения.

Важно! После выполнения руководства рекомендуем войти в консоль Google Cloud и на всякий случай удалить ключ API и связанную с ним учетную запись для выставления счетов.

Теперь у вас есть карта Google с автозаполнением адресного поля и метками.

Заключение

В этом руководстве вы узнали, как использовать пакет vue2-google-maps и Google Maps API в вашем приложении Vue.js.

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

Если вы хотите узнать о Vue.js больше, обратитесь к этому разделу нашего Информатория.