Vue接入百度地图显示及相关操作

Vue接入百度地图的API

首先你要有一个百度地图的key就是CK

申请网址：http://lbsyun.baidu.com/index.php?title=jspopular/guide/getkey

介绍：其实这个已经封装的很好了，在Vue里面也是，你利用npm把插件装进来，直接配置就可以使用。然后你需要什么时间就写什么

说几个网址方便参考：

Vue的官方文档 https://dafrok.github.io/vue-baidu-map/#/zh/start/usage

百度地图拾取坐标 http://api.map.baidu.com/lbsapi/getpoint/

事件操作文档 http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

H5使用（也是官方文档）http://lbsyun.baidu.com/jsdemo.htm#canvaslayer

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.直接在组件里面进行引用就可以

<baidu-map
style=" width:500px;height:370px;float:left"
:center="center"
:zoom="zoom"
:scroll-wheel-zoom="my_scroll_wheel_zoom"
class="baidu-map-view"
@ready="map_handler"
ak="CdGWCqVpavs1D9POs2sMR7n64m59UolO"
></baidu-map>


注意：我在这写的时候把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
})
}