В этом руководстве объясняется, как легко реализовать службу автозаполнения мест, предоставляемую Google Maps API, в vue js.
Посмотрите это видео для демонстрации
ПРИМЕЧАНИЕ: картинка необычная, потому что я использую VUETIFY. В этом руководстве просто объясняется, как работает API Google Адресов, без CSS 😐
Все, что нам нужно, это компонент vue и плагин под названием vue-meta (я уже использую его для SEO).
Сначала создадим файл под названием Places.vue.
// Places.vue
<template>
<div>
<input type="text" v-model="location">
<ul>
<li v-for="(result, i) in searchResults" :key="i">
{{ result }} // list of all places
</li>
</ul>
</div>
</template>
Теперь добавьте тег скрипта в тот же файл и добавьте следующее -
// Places.vue
<script>
export default {
data: () => ({
location: '',
searchResults: [],
service: null // will reveal this later 🕵️
})
}
</script>
Установите плагин vue-meta - документация очень проста и плагин устанавливается как любой другой плагин vue.
Размещение обработчика metaInfo в Places.vue -
// Places.vue
<script>
export default {
data, // already wrote above
metaInfo () {
return {
script: [{
src: `https://maps.googleapis.com/maps/api/js?key=<YOUR_API_KEY>&libraries=places`,
async: true,
defer: true,
callback: () => this.MapsInit() // will declare it in methods
}]
}
}
}
</script>
Поэтому я использовал здесь metaInfo потому, что мы можем -
- загружать внешние файлы JS на ходу, только когда компонент отрисован.
- Это дает нам возможности функции обратного вызова, вызываемой при загрузке файла JS! - 😎
Теперь давайте продолжим и создадим крючок для самых ожидаемых методов -
// Places.vue
<script>
export default {
data // defined already,
metaInfo // defined already,
methods: {
MapsInit () {
this.service = new window.google.maps.places.AutocompleteService()
},
displaySuggestions (predictions, status) {
if (status !== window.google.maps.places.PlacesServiceStatus.OK) {
this.searchResults = []
return
}
this.searchResults = predictions.map(prediction => prediction.description)
}
}
}
</script>
Давайте посмотрим, что делают эти функции MapsInit и displaySuggestions.
MapInit () - функция, вызываемая при загрузке файла JS.
В этом случае мы используем службу Google Places под названием - AutocompleteService (не беспокойтесь прямо сейчас! Проверьте документацию Google, если вы не можете жить без нее 🤷 ).
мы назначаем эту AutocompleteService () нашему свойству данных «service», чтобы мы могли использовать его позже.
displaySuggestions (прогнозы, статус) - объяснил чуть позже.
И это последний кусок головоломки. Наблюдатель в свойстве location
// Places.vue
<script>
export default {
data // already defined,
methods // already defined,
metaInfo // already defined,
// the magical part
watch: {
location (newValue) {
if (newValue) {
this.service.getPlacePredictions({
input: this.location,
types: ['(cities)']
}, this.displaySuggestions)
}
}
}
}
</script>
Итак, все, что вы вводите в поле ввода, изменяет свойство location, и всякий раз, когда изменяется свойство location, вызывается функция getPlacePredictions, которая прикреплен к свойству service.
getPlacePredictions получает два параметра:
- Объект, у которого есть много вещей, но мы используем здесь только input и типы -
a. input - запрос, который нужно предсказать ( this.locations в нашем случае).
b. types- тип результата. - функция обратного вызова, которую мы объявили выше в перехвате методов, - displaySuggestions.
Все сделано!
Если вам понравилось это читать и вы нашли его немного полезным,
Хотите купить мне кофе?
