最终效果
tempalte样式
<template>
<div>
<!--地图-->
<div :id="containerId" class="map-div"></div>
</div>
</template>
html引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=xxxxxxx"></script>
<!--自定义点击mark显示弹窗样式需要引入的js-->
<script type="text/javascript" src="http://api.map.baidu.com/library/InfoBox/1.2/src/InfoBox_min.js"></script>
js
<script>
export default {
name: "profile",
data() {
return {
map: undefined,
markersC: [
{
enableClicking: true,
lng: 116.482529,
lat: 39.923623,
img: require("@/assets/modules/images/bird.png"), //标准店自定义图标
title: "杜鹃",
num: 172,
label: "2023-05-02"
},
{
img: require("@/assets/modules/images/bird.png"),
enableClicking: true,
lng: 116.50222,
lat: 39.920026,
title: "赤鸟",
num: 73,
label: "2023-05-02"
},
{
enableClicking: true,
img: require("@/assets/modules/images/bird.png"),
title: "灰鹤",
lng: 116.476061,
lat: 39.879286,
num: 82,
label: "2023-05-02"
},
{
enableClicking: true,
img: require("@/assets/modules/images/bird.png"),
title: "锦鸟",
lng: 116.476061,
lat: 39.877071,
num: 67,
label: "2023-05-02"
},
{
enableClicking: true,
img: require("@/assets/modules/images/bird.png"),
title: "麻雀",
lng: 116.476061,
lat: 39.919805,
num: 237,
label: "2023-05-02"
}
],
containerId: "hazard-level-container2"
};
},
mounted() {
this.init();
},
methods: {
openInfo(item, point) {
//弹框右上角关闭图标
let closeicon = require("@/assets/modules/images/close.png");
//弹框样式
let info = `<div style="color:#fff;padding:10px;">
<span style="font-size: 14px;">${item.title}
<span style="color: #F59A23;">:${item.num}</span>
只</span>
<div style="color:#ccc">${item.label}</div>
</div>`;
let infoBox = new BMapLib.InfoBox(this.map, info, {
boxStyle: {
opacity: "1",
background: "rgba(125,178,205,0.9)",
width: "150px",
height: "50px",
marginBottom: "40px"
},
// closeIconMargin: "18px 8px 4px 4px",
closeIconUrl: closeicon,
enableAutoPan: true
});
//打开弹框
infoBox.open(point);
},
init() {
// 创建地图
this.map = this.initMap(this.containerId);
// 百度地图API功能
this.markers(); //获取标注
},
markers() {
let mar = [];
let iconSize = new BMap.Size(35, 44);
let marker = [];
let point = [];
for (let i in this.markersC) {
point[i] = new BMap.Point(this.markersC[i].lng, this.markersC[i].lat);
let myIcon = new BMap.Icon(this.markersC[i].img, iconSize, {
imageSize: iconSize
});
marker[i] = new BMap.Marker(point[i], {
icon: myIcon,
enableClicking: true
});
this.map.centerAndZoom(point[i], 14);
this.map.addOverlay(marker[i]); // 将标注添加到地图中
marker[i].addEventListener("click", r => {
//打开自定义弹窗
this.openInfo(this.markersC[i], point[i], this.map); //
});
}
},
initMap(containerId, options) {
let map = new BMap.Map(containerId, {
restrictCenter: false,
minZoom: 3,
maxZoom: 21
// mapType: BMAP_EARTH_MAP //必须先设置3D效果再设置地图类型,否则3D效果无效
});
let center;
if (options && options.centerX && options.centerY) {
center = new BMap.Point(options.centerX, options.centerY);
} else {
center = new BMap.Point(116.609873, 40.083128);
}
let level = options && options.level ? options.level : 14;
map.centerAndZoom(center, level);
map.enableKeyboard();
map.enableScrollWheelZoom();
map.enableInertialDragging();
map.enableContinuousZoom();
map.setMapType(BMAP_HYBRID_MAP); //设置地图样式
return map;
}
}
};
</script>
css
<style scoped>
.map-div {
width: calc(100% - 3.5rem);
height: calc(100vh - 3rem);
overflow: hidden;
margin: 0;
font-family: "微软雅黑", serif;
/*border-radius: 5px;*/
/*background-color: #1a1a1a;*/
}
</style>