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

流氓凡 技术分享 2020-05-16 8.65 K 5

上次分享到谷歌地图坐标打点(详见:谷歌地图坐标拾取器),那么前端如何显示国外打点后的坐标位置呢?

我这边主要使用 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 是显示的坐标点,可以多个。

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


评论

精彩评论