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 是显示的坐标点,可以多个。
至于更多的方法,详见引用地址。
评论
adrian
回复感谢群主
何.
回复急需
Lv
回复急需
Lv
回复zan
wencai0
回复赞