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

<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: "请输入搜索关键词",,
baiduDevicelocationx:114.220941,
baiduDevicelocationy:22.690015

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