vue 使用 vue-baidu-map组件 获取百度地图的经纬度

一 导入，初始化vue-baidu-map组件

可以在vue cli下直接下载安装依赖或者运行 npm i --save vue-baidu-map安装

然后在main.js中引用，需要自己去申请密钥
import Vue from ‘vue’
import BaiduMap from ‘vue-baidu-map’

Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: ‘YOUR_APP_KEY’
})
然后在想要用的组件下导入

附上gitHub的官方文档
https://github.com/Dafrok/vue-baidu-map#readme

二 获取百度地图的经纬度

先附上vue baidu map的文档，还有很多功能可以直接套用
https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
话不多说，直接上代码

H5代码

<template>
<baidu-map
:center="center"  //初始化经纬度
:zoom="zoom" //初始化缩放程度
:dragging="true"
:scroll-wheel-zoom="true"
class="map"
@ready="handler" //地图初始化
@click="getClickInfo"
@moving="syncCenterAndZoom"  //移动就会记录经纬度
@moveend="syncCenterAndZoom"
@zoomend="syncCenterAndZoom"
>
//地理位置的搜索功能
<bm-local-search
:keyword="keyword"
:auto-viewport="true"
:location="location"
></bm-local-search>
//缩放比例尺的展示
<bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>
//定位
<bm-geolocation
anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
:showAddressBar="true"
:autoLocation="true"
></bm-geolocation>
//添加一个小红点的，并将当前的经纬度写入数据中
<bm-marker :position="{lng:center.lng, lat: center.lat}"></bm-marker>
</baidu-map>
</template>

data里面需要添加的数据

//百度地图初始化数据
baidumapSwitch:false,
center: { lng: 114.220941, lat: 22.690015 },
zoom: 16,
location: "深圳市",
keyword: "请输入搜索关键词",

js

//百度地图初始化（这个一定要！否则地图回加载不出来）
handler({ BMap, map }) {},
//点击获取到当前经纬度
getClickInfo(e) {
console.log(e.point.lng);
console.log(e.point.lat);
this.center.lng = e.point.lng;
this.center.lat = e.point.lat;
},
//双向绑定经纬度以及缩放尺寸
syncCenterAndZoom(e) {
const { lng, lat } = e.target.getCenter();
this.center.lng = lng;
this.center.lat = lat;
// this.zoom = e.target.getZoom();
},
//经纬度同步
baidumap(){
this.baiduDevicelocationx = this.center.lng
this.baiduDevicelocationy = this.center.lat
}

然后大概出现的图片效果就会是这样了，把center里面的经纬度用v-model绑定起来然后赋值到你想用的地方就好了