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
})
}