Vue接入百度地图的API
首先你要有一个百度地图的key就是CK
申请网址：?title=jspopular/guide/getkey
介绍：其实这个已经封装的很好了，在Vue里面也是，你利用npm把插件装进来，直接配置就可以使用。然后你需要什么时间就写什么
说几个网址方便参考：
Vue的官方文档https://dafrok.github.io/vue-baidu-map/#/zh/start/usage
百度地图拾取坐标
事件操作文档#canvaslayer
H5使用（也是官方文档）
The Start
1.首先下载插件
$ npm install vue-baidu-map --save或者 yarn add vue-baidu-map --save
2.在Vue里面进行引入（基本上就是单独引入全局太浪费）
import { BaiduMap } from "vue-baidu-map
3.依赖注入在components里面进行声明
components: {
BaiduMap },
4.直接在组件里面进行引用就可以
注意：我在这写的时候把center和zoom写在了data里面,所以在data里面加
data() { return { center: { lng:0, lat:0}, zoom: 20 }; },ready 是在地图组件渲染完毕时触发，返回一个百度地图的核心类和地图实例——{BMap, map}。百度地图组件是异步加载，不要在组件的生命周期中访问 BMap 核心类和 map 实例，如有需要，请在所需组件的 ready 事件回调函数的参数中获取。
//加入回调方法 methods: { //地图显示的回调 map_handler({ BMap, map }) { this.BMap = BMap; this.map = map; } } 到此就可以显示基本的地图组件了 操作及案例metho添加下面代码进行关联实现效果
//点击进行传入经纬度值 就可以实现相应的移动 getClickInfo(e) { console.log(e.point.lng); console.log(e.point.lat); this.center.lng = e.point.lng; this.center.lat = e.point.lat; } //点击获取经纬度坐标并标点 this.map.addEventListener('click', (e) => { const point = new this.BMap.Point(e.point.lng, e.point.lat) const marker = new this.BMap.Marker(point) // 设置点击位置 map.clearOverlays() // 清空地图上其他红色位置标识 map.addOverlay(marker) // 添加指定点 }) // 获取浏览器当前定位 getCurlocation() { if (!this.BMap) return false let BMap = this.BMap let geolocation = new BMap.Geolocation() let _this = this geolocation.getCurrentPosition(function(r) { _this.map_center = r.point _this.shop_lng = r.point.lng _this.shop_lat = r.point.lat }) }