Vue使用谷歌地图显示位置及坐标

上次分享到谷歌地图坐标打点（详见：谷歌地图坐标拾取器），那么前端如何显示国外打点后的坐标位置呢？

我这边主要使用 Vue 的一个插件vue2-google-maps，如果你使用的是 vue1.x 那么就安装vue-google-maps 

npm install vue2-google-maps

然后将它引入到模板中，如果你喜欢 ES5 那就用 require

import Vue from 'vue'
import * as VueGoogleMaps from 'vue2-google-maps'

设置你自己申请到的 key 和地图版本

Vue.use(VueGoogleMaps, {
    load: {
        key: '你的 key',
        libraries: '3.26',
    },
})

值得说明的是：此处的 key 跟地图打点申请的 api 差不多，因此用一个 key 且不是空 api 的就可以了

模板中代码，用于显示出地图

<gmap-map
    :center="centers"
    :zoom="11"
    map-type-id="terrain"
    style="width: 100%; height: 100vh"
>
    <gmap-marker
        @dragend="updateMaker"
        :key="index"
        v-for="(m, index) in markers"
        :position="m.position"
        :clickable="true"
        :draggable="true"
        @click="centers=m.position"
    ></gmap-marker>
</gmap-map>

初始数据

data() {
            return {
                flag: false,
                centers: {
                    lat: 39.90419989999999, lng: 116.4073963
                },
                markers: [{
                    position: {lat: 39.90419989999999, lng: 116.4073963}
                }],
                place: null,
            }
        },

其中 center 是中心点坐标，markers 是显示的坐标点，可以多个。

至于更多的方法，详见引用地址。