写在前面
需求：vue项目中添加百度地图，实现具体业务。
一、效果：
image.png
二、下载安装vue-baidu-map
npm i --save vue-baidu-map
三、在main.js文件中引入百度
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
/* Visit http://lbsyun.baidu.com/apiconsole/key for details about app key. */
ak: '你的百度ak'
})
四、创建的vue文件中使用
<template>
<div class="map">
<div class="grid-content" style="width: 100%;height: 99.9%">
<baidu-map :center="center" :mapClick="false" :zoom="zoom" @ready="handler" style="height:100%;width: 100%" :scroll-wheel-zoom='true' enableMapClick="false">
</baidu-map>
</template>
······
methods: {
handler ({BMap, map}) {
let that = this;
let point = new BMap.Point(116.447962, 39.90143); //北京
this.map=map;
map.centerAndZoom(point, 11);
map.enableScrollWheelZoom(true);
that.setRegion();
//添加地图类型控件
let defaultOffset = new BMap.Size(0, 50);
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
],
offset: defaultOffset,
anchor: BMAP_ANCHOR_BOTTOM_LEFT
}));
map.setDefaultCursor('default');
}
·····
