Vue Js: Как реализовать и показать карту Google в приложении Vue js

В этом руководстве вы узнаете, как интегрировать и использовать карту Google в приложениях vue js с помощью пакета vue2-google-maps.

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

Обратите внимание, что Google Maps представляет собой надежный набор API для создания карт и взаимодействия с ними, визуализации данных о местоположении и поиска с помощью автозаполнения, и это лишь некоторые из них. Хотя широта их предложений кажется немного ошеломляющей, на самом деле начать довольно просто.

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

Итак, перейдите по этой ссылке: https://cloud.google.com/maps-platform/?_ga=2.27293823.277869946.1577356888-568469380.1576660626#get-started и получите ключ API.

Шаги для получения ключа API из консоли Google: 

• Посетите консоль Google Cloud Platform.
• Щелкните раскрывающийся список проекта и выберите или создайте проект, для которого вы хотите добавить ключ API.
• Нажмите кнопку меню и выберите API и службы > Учетные данные.
• На странице Учетные данные щелкните Создать учетные данные > Ключ API.
• В диалоговом окне создания ключа API отображается только что созданный ключ API.
• Включение Google Maps jаvascript API и Places API для проекта.
• Щелкните Закрыть.

Как реализовать и показать карту Google в приложении Vue js

Просто выполните следующие шаги и интегрируйте карту Google в приложение vue Js с помощью API карт Google: 

Шаг 1 - Создайте новое приложение VUE JS

На этом шаге откройте терминал и выполните следующую команду, чтобы создать новое приложение vue js: 

vue create google-map-vue

Шаг 2 - Установите пакет карт Google

На этом шаге откройте терминал и выполните следующую команду, чтобы установить пакет карт 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";
import * as VueGoogleMaps from "vue2-google-maps";
 
Vue.use(VueGoogleMaps, {
  load: {
    key: "ЗАМЕНИТЕ-ЭТО-СВОИМ-КЛЮЧОМ-КОТОРЫЙ-ПОЛУЧИЛИ",
    libraries: "places" // необходимо для ввода мест
  }
});
 
new Vue({
  el: "#app",
  components: { App },
  template: ""
});

Шаг 4 - Создайте компонент поиска карты

На этом этапе перейдите в каталог /src/components и создайте новый компонент с именем GoogleMap.vue и добавьте в него следующий код:

<template>
  <div>
    <div>
      <h2>Search and add a pin</h2>
      <label>
        <gmap-autocomplete
          @place_changed="setPlace">
        </gmap-autocomplete>
        <button @click="addMarker">Add</button>
      </label>
      <br/>
 
    </div>
    <br>
    <gmap-map
      :center="center"
      :zoom="12"
      style="width:100%;  height: 400px;"
    >
      <gmap-marker
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        @click="center=m.position"
      ></gmap-marker>
    </gmap-map>
  </div>
</template>
 
<script>
export default {
  name: "GoogleMap",
  data() {
    return {
      // по умолчанию Монреаль, чтобы упростить
      // измените это на то, что имеет смысл
      center: { lat: 45.508, lng: -73.587 },
      markers: [],
      places: [],
      currentPlace: null
    };
  },
 
  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>

Шаг 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>

В этом примере, вы узнали, как интегрировать карту Google в приложение vue js, используя API карты Google и пакет vue-google-maps.