Use Baidu map in vue

1. Install the plugin

yarn add vue-baidu-map --save

2. Register in main.js

import baiduMap from 'vue-baidu-map'
Vue.use(baiduMap, {
 // ak 是在百度地图开发者平台申请的密钥 详见 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})

3. Use on the page

<baidu-map
  @ready="init"
  class="baiduMap"
  id="cfbaiduMap"
  scroll-wheel-zoom//允许缩放
  >
</baidu-map>
设置一个固定的宽高

4. Baidu map initialization function and batch generation of custom icon points

 init({ BMap, map }) {
      //enableMapClick:false 表示禁止地图内景点信息点击
      map = new BMap.Map('baiduMap', { enableMapClick: false })
      // 设置地图允许的最大最小级别
      map.setMinZoom(5)
      map.setMaxZoom(20)
      // 开启鼠标滚轮缩放
      map.enableScrollWheelZoom(true)
      // 设置中心点坐标和地图级别
      map.centerAndZoom(this.city, 14)
      // 创建自定义标记 参数:自定义图片路径 大小 偏移量
      const icon = new BMap.Icon(
        require('./assets/image/youtong-icon-01.png'),
        new BMap.Size(20, 30),
        { anchor: new BMap.Size(0, 0) }
      )
      // 根据坐标批量生成自定义图标点
      this.cityData.forEach((item) => {
        // 创建点
        const point = new BMap.Point(item.enti_lnt, item.enti_lat)
        // 创建标注
        const marker = new BMap.Marker(point, { icon: icon })
        // 将标注添加到地图中
        map.addOverlay(marker)
        // 给标记点添加点击事件
        marker.addEventListener('click', (e) => {
          执行想进行的操作(经个人测试在此处注册点击事件效果最佳,该有的数据项都可以获取)
        })
      })
    },

5. Requirement 1: switch center point

// 创建一个函数处理缩放变化
      this.fn = () => {
        map.centerAndZoom(this.city, 16)
      }
// 用函数重新执行中心点,哪里用哪里调

6. Requirement 2: Mouse over the custom icon to change

// 创建一个新图标
 const icon1 = new BMap.Icon(
        require('./assets/image/youtong-icon-03.png'),
        new BMap.Size(20, 30),
        { anchor: new BMap.Size(0, 0) }
      )
// 创建一个函数处理图标更换(这里我使用的是递归的方式)
      let marker1 = ''
      this.fnIcon = (data, val) => {
        marker1 = new BMap.Marker(data, { icon: icon1 })
        map.addOverlay(marker1)
        marker1.addEventListener('mouseout', () => {
          map.removeOverlay(marker1)
          const marker = new BMap.Marker(data, { icon: icon })
          map.addOverlay(marker)
          map.closeInfoWindow(val, data)
          marker.addEventListener('mouseover', () => {
            map.openInfoWindow(data, val)
            this.fnIcon(data, val)
          })
        })
      }

Requirement 3: The mouse slides over the display information window

     // 注册一个信息窗口
        const opts = {
          width: 100, // 信息窗口宽度
          height: 50, // 信息窗口高度
          message: '提示信息'
        }
        const infoWindow = new BMap.InfoWindow(item.enti_name, opts)
        marker.addEventListener('mouseover', () => {
          map.openInfoWindow(infoWindow, point)
        })
        marker.addEventListener('mouseout', () => {
          map.closeInfoWindow(infoWindow, point)
        })