一、业务场景
通过百度地图API的label添加文本覆盖物，用于显示marker点位的描述信息。并控制label的显示，鼠标移入点位的时候显示文字，不移入点位的时候不显示文字。去掉背景颜色框的边框和背景颜色改成透明。
二、示例结果
鼠标移动到图标上的时候显示文字，移出的时候文字隐藏。如果想一直显示也可以，后面的鼠标监听事件去掉就好。
三、示例代码
<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 = nullconst 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.65',latitude: '32.288965',address: '地理位置5'}, {longitude: '116.708974',latitude: '28.144061',address: '地理位置6'}]const initMap = () => {// 创建地图实例map = new BMap.Map('mapContainer')// 根据传入的pointsList点位转化为百度Pointconst 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 })// 给地图添加覆盖物markermap.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' })})// 给地图添加覆盖物labelmap.addOverlay(label)})}onMounted(() => {initMap()})return {}}}</script><style lang="scss" scoped>// 地图.map-container {width: 100%;height: 600px;}</style>
最主要的就是通过addOverlay()进行添加label和marker的覆盖物。label 用于显示文字， marker用于显示定位点位。再通过鼠标的监听事件，控制 label 的显示与隐藏。
mapPointsList[index].address = item.address
也算是一步关键功能，这里通过new BMap.Point()方法得到百度地图的定位点之后，这个点位其实是一个对象，所以给这个对象再添加 address 属性用来存放位置名称，这个属性是可以随便写的，也可以用别的名称，只要不要和通过new BMap.Point()得到的对象中原本的属性冲突就好。
尽量是打印下new BMap.Point()得到的点位对象，看下这步操作到底返回的是什么东西，加深理解
