Vue Js: как добавить несколько маркеров на карты Google в приложении Vue js
В этом руководстве вы узнаете, как добавить несколько маркеров на карту Google в приложении vue js.
Это руководство поможет вам шаг за шагом добавить несколько маркеров на карты Google в приложении Vue js. А также сделаем простой пример того, как добавить несколько маркеров на карты Google в vue js с помощью vue2-google-maps.
Обратите внимание, что Google Maps представляет собой надежный набор API-интерфейсов для создания и взаимодействия с картами, визуализации данных о местоположении и поиска с помощью автозаполнения, и это лишь некоторые из них. Хотя широта их предложения кажется немного подавляющей, на самом деле начать работу довольно просто.
Прежде всего, вам необходимо получить ключ API.
Посетите эту ссылку: https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started и получите ключ API.
Шаги, чтобы получить ключ API из консоли Google:
- Посетите Google Cloud Platform Console.
- Кликните раскрывающийся список проекта и выберите или создайте проект, для которого вы хотите добавить ключ API.
- Нажмите кнопку меню и выберите APIs & Services > Credentials (API и сервисы > Учетные данные)
- На странице учетных данных щелкните Create credentials > API key (Создать учетные данные > ключ API)
- В диалоговом окне создания ключа API отобразится только что созданный ключ API.
- Включение Google Maps jаvascript API и Places API для проекта.
- Щелкните "Закрыть (Close)".
Как добавить несколько маркеров на Google Maps в vue2-google-maps
Просто выполните следующие действия и добавьте несколько маркеров на карты Google в приложении vue js с помощью пакета vue2-google-maps:
- Шаг 1. Создайте новое приложение Vue js
- Шаг 2 - Установите пакет Google Map
- Шаг 3 - Добавьте во Vue с помощью vue2-google-maps
- Шаг 4 - Создайте компонент поиска по карте
- Шаг 5 - Добавьте компонент в App.vue
Шаг 1. Создайте новое приложение VUE JS
На этом шаге откройте свой терминал и выполните следующую команду, чтобы создать новое приложение vue js:
vue create google-map-vue
Шаг 2 - Установите пакет Google Map
На этом шаге откройте свой терминал и выполните следующую команду, чтобы установить пакет карты Google в приложение vue js:
cd google-map-vue
npm install vue2-google-maps --save
Шаг 3 - Добавьте во Vue с помощью vue2-google-maps
На этом этапе посетите каталог /src и откройте файл main.js. Затем импортируйте vue2-google-maps в main.js и создайте экземпляр плагина, используя ключ API карты Google, указанный выше:
import Vue from 'vue'
import App from './App.vue'
import * as VueGoogleMaps from "vue2-google-maps"
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 своим фактическим ключом Google API. Также укажите библиотеку мест, которая потребуется для использования функции автозаполнения.
Шаг 4 - Создайте компонент поиска по карте
На этом этапе посетите каталог /src/components и создайте новый компонент с именем GoogleMap.vue и добавьте в него следующий код:
<template>
<div>
<br>
<h1>Vue Js Add Multiple Markers on Google Maps Example - MakeCodes.ru</h1>
<gmap-map
:center="center"
:zoom="12"
style="width:100%; height: 400px;"
>
<gmap-marker
:key="index"
v-for="(m, index) in markers"
:position="m"
@click="center=m"
></gmap-marker>
</gmap-map>
</div>
</template>
<script>
export default {
name: "GoogleMap",
data() {
return {
center: { lat: 45.508, lng: -73.587 },
markers: [],
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
};
});
this.markers = [
{
lat: 21.1594627,
lng: 72.6822083,
label: 'Surat'
},
{
lat: 23.0204978,
lng: 72.4396548,
label: 'Ahmedabad'
},
{
lat: 22.2736308,
lng: 70.7512555,
label: 'Rajkot'
}
];
}
}
};
</script>
Шаг 5 - Добавьте компонент в App.vue
На этом этапе посетите каталог /src/ и файл App.vue. А затем добавьте в него следующий код:
<template>
<div id="app">
<google-map />
</div>
</template>
<script>
import GoogleMap from "./components/GoogleMap";
export default {
name: 'App',
components: {
GoogleMap
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
В этом руководстве вы узнали, как добавить несколько маркеров на карты Google в приложении Vue js с помощью vue2-google-maps.
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.