Vue.js和Google Maps进行位置选择 - vue-location-picker

Vue.js和Google Maps进行位置选择 - vue-location-picker
插件名称 vue-location-picker
发布时间 2020年12月16日
插件作者 pespantelis

使用Vue.js和Google Maps的Places API构建的简单,可自定义的位置选择器。

安装和下载:

npm install --save vue-location-picker

用法

import LocationPickerInit from 'vue-location-picker/src/init'
import LocationPicker from 'vue-location-picker'

new Vue({
  el: 'body',

  // 你需要调用LocationPickerInit(appInstance, configObject, optionsObject)
  ready () {
    LocationPickerInit(
      this,

      // 配置对象
      {
        key: 'GoogleMapsApiKey', // 必填
        language: 'en-US'        // 可选
      },

      // 选项对象
      {
        map: {
          center: { lat: 0, lng: 0 },
          /**其它地图选项**/
        },
        marker: { /** 标记的选项 **/ },
        infoWindow: { /** 信息窗口选项 **/ },
        autocomplete: { /** autocomplete 选项**/ }
      }
    )
  },

  data: {
    place: null // 可选
  },

  components: { LocationPicker }
})
<location-picker :place.sync="place"></location-picker>

使用自定义信息窗口

<!-- MyInfoWindow.vue -->
<template>
  <!-- ... -->
</template>

<script>
  export default {
    // 您应该实现这两种方法
    methods: {
      showAddress (place) {
        // ..
      },

      showError () {
        // ..
      }
    }
  }
</script>
// MyLocationPicker.js
import LocationPicker from 'vue-location-picker'
import InfoWindow from './MyInfoWindow.vue'

export default Object.assign(LocationPicker, {
  components: { InfoWindow }
})
// main.js
import LocationPicker from './MyLocationPicker'

new Vue({
  components: { LocationPicker }
})