1. Business scenario
Add text overlay through Baidu Map API label to display marker point description information. And control the display of label. When the mouse moves into the point, the text is displayed, and when the mouse is not moved into the point, the text is not displayed. Remove the border of the background color box and change the background color to transparent.
2. Example results
When the mouse is moved over the icon, the text is displayed, and when the mouse is moved out, the text is hidden. If you want to display it all the time, you can just remove the subsequent mouse listening events.
3. Sample code
<template>
<div id="mapContainer" class="map-container"></div>
</template>
<script>
import {
onMounted } from 'vue'
import BMap from 'BMap'
export default {
name: 'BaiduMap',
setup () {
let map = null
const pointsList = [{
longitude: '116.226045',
latitude: '39.663223',
address: '地理位置1'
}, {
longitude: '116.629636',
latitude: '39.789306',
address: '地理位置2'
}, {
longitude: '116.892947',
latitude: '38.36702',
address: '地理位置3'
}, {
longitude: '108.853328',
latitude: '35.562558',
address: '地理位置4'
}, {
longitude: '112.620175',
latitude: '32.288965',
address: '地理位置5'
}, {
longitude: '116.708974',
latitude: '28.144061',
address: '地理位置6'
}]
const initMap = () => {
// 创建地图实例
map = new BMap.Map('mapContainer')
// 根据传入的pointsList点位转化为百度Point
const mapPointsList = []
pointsList.forEach((item, index) => {
mapPointsList.push(new BMap.Point(Number(item.longitude), Number(item.latitude)))
mapPointsList[index].address = item.address
})
// 获取合理的中心点
const centerPoint = map.getViewport(mapPointsList)
// 初始化地图，设置中心点坐标和地图级别
map.centerAndZoom(centerPoint.center, centerPoint.zoom)
// 添加覆盖点
mapPointsList.forEach((item,index) => {
// 添加覆盖点
const mapIcon = new BMap.Icon(require('./assets/map-position.png'), new BMap.Size(40, 52))
const marker = new BMap.Marker(item, {
icon: mapIcon })
// 给地图添加覆盖物marker
map.addOverlay(marker)
// 创建label文本标注
const label = new BMap.Label(item.address, {
position: item, // 文本绑定的点位位置
offset: new BMap.Size(-5, -20) // 文本位置移动
})
// 设置文本标注样式（刚开始标注隐藏，鼠标移入的时候再显示，如果要全部显示就直接控制display属性即可）
label.setStyle({
display: 'none',
border: '0px',
backgroundColor: '000000000001' // 用于设置背景透明色
})
// 通过鼠标移入marker的时候显示label标注
marker.addEventListener('mouseover', function (e) {
label.setStyle({
display: 'block' })
})
marker.addEventListener('mouseout', function (e) {
label.setStyle({
display: 'none' })
})
// 给地图添加覆盖物label
map.addOverlay(label)
})
}
onMounted(() => {
initMap()
})
return {
}
}
}
</script>
<style lang="scss" scoped>
// 地图
.map-container {
width: 100%;
height: 600px;
}
</style>
The main thing is to add the overlays of and through addOverlay(). Label is used to display text, and marker is used to display positioning points. Then, control the display and hiding of labels through mouse listening events. labelmarker
mapPointsList[index].address = item.address
is also a key function. After getting the positioning point of Baidu map through the new BMap.Point() method, this point is actually an object, so add the address attribute to this object for storage. Position name, this attribute can be written casually, or you can use another name, as long as it does not conflict with the original attributes in the object obtained through new BMap.Point().
Try to print the point object obtained by new BMap.Point() to see what this operation returns and deepen your understanding