Googleマップを使用する簡単なvueコンポーネントを作成します

Googleマップを使用するために我々のプロジェクトにインストールすることがありますが、KBの追加の量を考慮すると、いくつかの依存関係があるときにいくつかの日には、私は自分自身のコンポーネントを作成するための位置になったことも、私はあまりにも多くの機能を使用するつもりはなかったいくつかのライブラリがあります.
私が共有しようとしているコードは、Google Mapsの基礎を使用したり、独自のコンポーネントを起動したり、プロジェクトに役立つことができるより多くの機能を与えるために役に立つことができます.

APIキーの取得
マップJavaScript APIを使用するには、APIキーが必要です.これは、支払い会計目的のためのプロジェクトに関連する要求を認証するために使用される一意の識別子です.
APIキーを取得するには、次の手順を実行します.
GCPコンソールに移動します.https://cloud.google.com/console/google/maps-apis/overview
ドロップダウンメニューを使用して、新しいAPIキーが必要なプロジェクトを選択または作成します
ボタンをクリックしてサイドバーを開き、API &サービスに行きます
資格情報ページで、Create資格情報＞APIキーをクリックします.APIキー作成ダイアログは、新しいAPIキーを表示します.
Google Maps APIキーについては、ドキュメントを参照してください.https://developers.google.com/maps/documentation/javascript/get-api-key
では、プロジェクトのルートで環境ファイルを作成します.env , その内容は

VUE_APP_MAPS_API_KEY="API_KEY"

ライブラリの初期化
Googleマップライブラリがブラウザでダウンロードされ、初期化されると、解決される約束を返す関数でライブラリを初期化できます.
Here is a basic example マップの作成方法とマーカーの追加.
VueプロジェクトでGoogleマップライブラリを積極的に使用するには、新しいスクリプトを作成します./src/utils/gmaps.js .

const API_KEY = process.env.VUE_APP_MAPS_API_KEY
const CALLBACK_NAME = 'initMap'

let initialized = !!window.google
let resolveInitPromise
let rejectInitPromise

// This promise handles the initialization
// status of the google maps script
const initPromise = new Promise((resolve, reject) => {
  resolveInitPromise = resolve
  rejectInitPromise = reject
})

export default function init() {
  // if google maps is already init
  // the `initPromise` should be resolved
  if (initialized) return initPromise

  initialized = true
  // the callback function is called
  // by the Google maps script if it is
  // successfully loaded
  window[CALLBACK_NAME] = () => resolveInitPromise(window.google)

  // we inject a new tag into the Head
  // of the HTML to load the Google Maps script
  const script = document.createElement('script')
  script.async = true
  script.defer = true
  script.src = `https://maps.googleapis.com/maps/api/js?key=${API_KEY}&callback=${CALLBACK_NAME}`
  script.onerror = rejectInitPromise
  document.querySelector('head').appendChild(script)

  return initPromise
}

マップを表示するコンポーネントの作成
私はコンポーネントを呼び出すつもりですGoogleMaps そして、/src/components/GoogleMaps.vue .
テンプレートにマークアップを加えましょう

<template>
  <div class="map" ref="map"></div>
</template>

<script></script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

これは、マークアップのすべての必要なコードは、我々はアプリケーションのレイアウトの依存性を追加することがあります.
The mounted LifeCycleフックは非同期であり、それはGoogleマップライブラリを初期化するためには、マップを使用してレンダリングするために続行することを待つdrawMap マップ上のユーザーの位置を表すマーカーを追加します.

<script>
import gmapsInit from '@/utils/gmaps'
import { isNumber, isArray } from 'util'

export default {
  name: 'GoogleMaps',

  data() {
    return {
      google: null,
      map: null,
      innerMarkers: [],
      userMarker: null
    }
  },

  async mounted() {
    try {
      // init and wait for the Google script is mounted
      this.google = await gmapsInit()

      // if the location is already set, for example
      // when returning back to this view from another one
      if ('lat' in this.myLocation && this.myLocation.lat) {
        this.drawMap()
        // set the current location
        this.addMarker(this.myLocation)
      }
    } catch (err) {
      console.log('ERROR:', err)
    }
  },

  computed: {
    myLocation() {
      // if the coordinates is not set
      if (!('lat' in this.center) && !isNumber(this.center.lat)) {
        return null
      }
      // return the object expected by Google Maps
      return { lat: this.center.lat, lng: this.center.lng }
    }
  },

  methods: {
    drawMap() {
      if (this.myLocation.lat && this.myLocation.lng) {
        // creating the map object, displaying it in the $el DOM object
        this.map = new this.google.maps.Map(this.$refs['map'], {
          zoom: 18,
          center: this.myLocation
        })

        // center the canvas of the map to the location of the user
        this.map.setCenter(this.myLocation)
      }
    },

  }
}
</script>

いくつかのデータをコンポーネントに渡す必要があり、必要に応じて設定しますprop コンポーネントの場合center , これは、マップの中心の座標を含み、同じ名前の小道具を通してマーカーのコレクションを受け取ることができます.

<script>
  props: {
    center: {
      type: Object,
      required: true
    },
    markers: {
      type: Array
    }
  },
</script>

最後に、ユーザーの現在位置の位置の変更の前に反応性を追加することです.また、マーカーで動作するメソッドを追加する必要があります.

<script>
  methods: {
        // add a marker with a blue dot to indicate the user location
    setUserMarker(location) {
      this.userMarker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
    },

    // Adds a marker to the map and push to the array
    addMarker(location) {
      // the marker positioned at `myLocation`
      const marker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
      this.innerMarkers.push(marker)
    },

    // Sets the map on all markers in the array
    setAllMarkersInMap(map) {
      for (let i = 0; i < this.innerMarkers.length; i++) {
        this.innerMarkers[i].setMap(map)
      }
    },

    // Removes the markers from the map, but keeps them in the array
    clearMarkers() {
      this.setAllMarkersInMap(null)
    },

    // Deletes all markers in the array by removing references to them
    deleteMarkers() {
      this.clearMarkers()
      this.innerMarkers = []
    }
  },

  watch: {
    marker: function(newVal) {
      if (isArray(newVal)) {
        // clear the markers
        this.clearMarkers()

        for (let i = 0; i < newVal.length; i++) {
          let position = newVal[i]
          if (
            'lat' in position &&
            isNumber(position.lat) &&
            isNumber(position.lng)
          ) {
            // set the current location
            this.addMarker(position)
          }
        }
      }
    }
  }
</script>

それは非常に簡単であり、今、あなたはマーカーで、アプリケーション内のマップをレンダリングすることができます

<template>
  <GoogleMaps :center="{ ...coordinates }" />
<template>

すべてのコードをGoogleMap コンポーネント

<template>
  <div class="map" ref="map"></div>
</template>

<script>
import gmapsInit from '@/utils/gmaps'
import { isNumber, isArray } from 'util'

export default {
  name: 'GoogleMaps',
  props: {
    center: {
      type: Object,
      required: true
    },
    markers: {
      type: Array
    }
  },
  async mounted() {
    try {
      // init and wait for the Google script is mounted
      this.google = await gmapsInit()

      // if the location is already set, for example
      // when returning back to this view from another one
      if ('lat' in this.myLocation && this.myLocation.lat) {
        this.drawMap()
        // set the current location
        this.addMarker(this.myLocation)
      }
    } catch (err) {
      console.log('ERROR:', err)
    }
  },
  data() {
    return {
      google: null,
      map: null,
      innerMarkers: [],
      userMarker: null
    }
  },
  computed: {
    myLocation() {
      // if the coordinates is not set
      if (!('lat' in this.center) && !isNumber(this.center.lat)) {
        return null
      }
      // return the object expected by Google Maps
      return { lat: this.center.lat, lng: this.center.lng }
    }
  },
  methods: {
    drawMap() {
      if (this.myLocation.lat && this.myLocation.lng) {
        // creating the map object, displaying it in the $el DOM object
        this.map = new this.google.maps.Map(this.$refs['map'], {
          zoom: 18,
          center: this.myLocation
        })

        // center the canvas of the map to the location of the user
        this.map.setCenter(this.myLocation)
      }
    },
    // add a marker with a blue dot to indicate the user location
    setUserMarker(location) {
      this.userMarker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
    },
    // Adds a marker to the map and push to the array
    addMarker(location) {
      // the marker positioned at `myLocation`
      const marker = new this.google.maps.Marker({
        position: location,
        map: this.map
      })
      this.innerMarkers.push(marker)
    },
    // Sets the map on all markers in the array
    setAllMarkersInMap(map) {
      for (let i = 0; i < this.innerMarkers.length; i++) {
        this.innerMarkers[i].setMap(map)
      }
    },
    // Removes the markers from the map, but keeps them in the array
    clearMarkers() {
      this.setAllMarkersInMap(null)
    },
    // Deletes all markers in the array by removing references to them
    deleteMarkers() {
      this.clearMarkers()
      this.innerMarkers = []
    }
  },
  watch: {
    marker: function(newVal) {
      if (isArray(newVal)) {
        // clear the markers
        this.clearMarkers()

        for (let i = 0; i < newVal.length; i++) {
          let position = newVal[i]
          if (
            'lat' in position &&
            isNumber(position.lat) &&
            isNumber(position.lng)
          ) {
            // set the current location
            this.addMarker(position)
          }
        }
      }
    }
  }
}
</script>

<style scoped>
.map {
  width: 100%;
  height: 400px;
}
</style>

それはあなたのプロジェクトに役立つことを期待!