百度地图添加文本标注显示文字

一、业务场景

通过百度地图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 = 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>

最主要的就是通过 addOverlay() 进行添加label 和 marker 的覆盖物。label 用于显示文字， marker用于显示定位点位。再通过鼠标的监听事件，控制 label 的显示与隐藏。

mapPointsList[index].address = item.address

也算是一步关键功能，这里通过new BMap.Point() 方法得到百度地图的定位点之后，这个点位其实是一个对象，所以给这个对象再添加 address 属性用来存放位置名称，这个属性是可以随便写的，也可以用别的名称，只要不要和通过new BMap.Point() 得到的对象中原本的属性冲突就好。
尽量是打印下new BMap.Point() 得到的点位对象，看下这步操作到底返回的是什么东西，加深理解