vue-cli创建的项目中使用百度地图，样式如下
首先，引入vue-baidu-map，以展示地图，对应的命令是
npm install vue-baidu-map --save
然后，在main.js中完成全局注册
import BaiduMap from 'vue-baidu-map'
Vue.use(BaiduMap, {
// ak 是在百度地图开发者平台申请的**
ak: 'YOUR_APP_KEY'
})
然后在页面中应用
<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="init"></baidu-map>
绑定的ready是地图的初始化信息，center和zoom一定更要写，不然会导致地图无法出现。下面是数据结构以及一些对应的字段
data() {
return {
center: {
lng: 109.45744048529967,
lat: 36.49771311230842
},
zoom: 13,
mapData: [],
people: [{
lng: 109.45744048529967,
lat: 36.49771311230842,
type: 'people',
orderNum: 5
}, {
lng: 110.45744048529967,
lat: 35.49771311230842,
type: 'people',
orderNum: 3
}],
orders: [{
lng: 109.75744048529967,
lat: 36.49771311230842,
type: 'order',
stayTime: '12'
}, {
lng: 109.45744048529967,
lat: 36.89771311230842,
type: 'order',
stayTime: '3'
}],
tabList: [{
name: '全部显示',
type: 'all'
}, {
name: '仅显示人员',
type: 'people'
}, {
name: '仅显示订单',
type: 'order'
}],
currentTab: 'all',
map: null,
infoBox: null,
content: '',
opts: null
};
},
下面是地图的初始化
init({BMap, map}) {
this.map = map;
// 初始化地图,设置中心点坐标
var point = new BMap.Point(119.80250895, 25.48905564);
map.centerAndZoom(point, 14);
this.setMarker();
// 添加鼠标滚动缩放
map.enableScrollWheelZoom();
},
之后就是根据不同的数据设置不同的标记点
setMarker() {
var pointArray = [];
if (this.mapData.length > 0) {
// 清除地图上的覆盖物
this.map.clearOverlays();
for (var i = 0; i < this.mapData.length; i++) {
var pt = new BMap.Point(this.mapData[i].lng, this.mapData[i].lat);
pointArray.push(pt);
if (this.mapData[i].type == 'order' && this.mapData[i].stayTime < 12) {
var myIcon = new BMap.Icon(require('@/assets/image/icon_order_green.png'), new BMap.Size(40, 40));
}
if (this.mapData[i].type == 'order' && this.mapData[i].stayTime >= 12) {
var myIcon = new BMap.Icon(require('@/assets/image/icon_order_yellow.png'), new BMap.Size(40, 40));
}
if (this.mapData[i].type == 'people' && this.mapData[i].orderNum < 5) {
var myIcon = new BMap.Icon(require('@/assets/image/icon_person_green.png'), new BMap.Size(40, 40));
}
if (this.mapData[i].type == 'people' && this.mapData[i].orderNum >= 5) {
var myIcon = new BMap.Icon(require('@/assets/image/icon_person_red.png'), new BMap.Size(40, 40));
}
myIcon.setImageSize(new BMap.Size(40, 40));
var marker = new BMap.Marker(pt, {
icon: myIcon
}); // 创建标注
this.map.addOverlay(marker);
this.addClickHandler(this.mapData[i], marker);
var item = this.mapData[i];
}
var view = this.map.getViewport(pointArray);
var mapZoom = view.zoom;
var centerPoint = view.center;
this.map.centerAndZoom(centerPoint, mapZoom);
}
},
注意，引入本地图片的时候需要用require引入，再然后就是点击标记的时候显示的弹窗
// 点击标记显示信息窗口
addClickHandler(item, marker) {
marker.addEventListener('click', e = > {
if (item.type == 'order') {
this.content = `
<div class="pop_container" ref="popContainer">
<section>
<p><label>到单时间：</label><span>2020-07-16 12:30</span></p>
<p><label>订单地址：</label><span>嘉兴中威苑12幢</span></p>
<p><label>业务号码：</label><span>122232543564656</span></p>
<p><label>装机单号：</label><span>122232543564656</span></p>
</section>
<section>
<p>${item.stayTime}H</p>
<p>留单时间</p>
</section>
</div>
`;
this.opts = {
width: 400,
height: 150,
enableMessage: true
};
}
if (item.type == 'people') {
this.content = `
<div class="pop_container people_container">
<section>
<p><label>装机经理：</label><span>张晓松（1234567）</span></p>
<p><label>签到时间：</label><span>2020-07-16 12:30</span></p>
</section>
<section>
<p>${item.orderNum}张</p>
<p>剩余订单</p>
</section>
</div>
`;
this.opts = {
width: 400,
height: 100,
enableMessage: true
};
}
this.titleName = item.deviceCode ? item.deviceCode : item.buildingName;
var p = marker.getPosition(); //获取marker的位置
var marker1 = new BMap.Marker(new BMap.Point(p.lng, p.lat));
this.openInfo(item, marker1);
});
}, openInfo(item, p) {
var point = new BMap.Point(p.getPosition().lng, p.getPosition().lat);
var infoWindow = new BMap.InfoWindow(this.content, this.opts); // 创建信息窗口对象
this.map.openInfoWindow(infoWindow, point); //开启信息窗口
setTimeout(() = > {
if ((item.type == 'order' && item.stayTime < 12) || (item.type == 'people' && item.orderNum < 5)) {
document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(26,179,148,0.8)';
}
if (item.type == 'order' && item.stayTime >= 12) {
document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(248,172,89,0.8)';
}
if (item.type == 'people' && item.orderNum >= 5) {
document.getElementsByClassName('BMap_bubble_content')[0].style.backgroundColor = 'rgba(230,93,93,0.8)';
}
}, 100);
}
下面是地图样式的改写
.anchorBL,
.BMap_cpyCtrl {
display: none;
}
.BMap_bubble_title {
color: white;
font-size: 13px;
font-weight: bold;
text-align: left;
padding-left: 5px;
padding-top: 5px;
border-bottom: 1px solid gray;
background-color: #0066b3;
}
/* 消息内容 */
.BMap_bubble_content {
background-color: rgba(40, 40, 40, 0.8);
padding-left: 5px;
padding-top: 5px;
padding-bottom: 10px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
}
/* 内容 */
.BMap_pop div:nth-child(9) {
top: 35px !important;
border-radius: 7px;
}
.BMap_pop div:nth-child(5) {
display: none;
}
/* 左上角删除按键 */
.BMap_pop img {
// top: 43px !important;
// left: 215px !important;
display: none;
}
.BMap_top {
display: none;
}
.BMap_bottom {
display: none;
}
.BMap_center {
display: none;
}
/* 隐藏边角 */
.BMap_pop div:nth-child(1) div {
display: none;
}
.BMap_pop div:nth-child(3) {
display: none;
}
.BMap_pop div:nth-child(7) {
display: none;
}