vue 使用 vue-baidu-map组件 自定义百度地图 和 通过定位获取百度地图的经纬度

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代码

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绑定起来然后赋值到你想用的地方就好了