1.安裝插件

yarn add vue-baidu-map --save

2.在main.js注冊(cè)

import baiduMap from 'vue-baidu-map'
Vue.use(baiduMap, {
 // ak 是在百度地圖開發(fā)者平臺(tái)申請(qǐng)的密鑰 詳見 http://lbsyun.baidu.com/apiconsole/key */
  ak: ''
})

3.在頁面使用

<baidu-map
  @ready="init"
  class="baiduMap"
  id="cfbaiduMap"
  scroll-wheel-zoom//允許縮放
  >
</baidu-map>
設(shè)置一個(gè)固定的寬高

4.百度地圖初始化函數(shù)及批量生成自定義圖標(biāo)點(diǎn)

 init({ BMap, map }) {
      //enableMapClick:false 表示禁止地圖內(nèi)景點(diǎn)信息點(diǎn)擊
      map = new BMap.Map('baiduMap', { enableMapClick: false })
      // 設(shè)置地圖允許的最大最小級(jí)別
      map.setMinZoom(5)
      map.setMaxZoom(20)
      // 開啟鼠標(biāo)滾輪縮放
      map.enableScrollWheelZoom(true)
      // 設(shè)置中心點(diǎn)坐標(biāo)和地圖級(jí)別
      map.centerAndZoom(this.city, 14)
      // 創(chuàng)建自定義標(biāo)記 參數(shù):自定義圖片路徑 大小 偏移量
      const icon = new BMap.Icon(
        require('./assets/image/youtong-icon-01.png'),
        new BMap.Size(20, 30),
        { anchor: new BMap.Size(0, 0) }
      )
      // 根據(jù)坐標(biāo)批量生成自定義圖標(biāo)點(diǎn)
      this.cityData.forEach((item) => {
        // 創(chuàng)建點(diǎn)
        const point = new BMap.Point(item.enti_lnt, item.enti_lat)
        // 創(chuàng)建標(biāo)注
        const marker = new BMap.Marker(point, { icon: icon })
        // 將標(biāo)注添加到地圖中
        map.addOverlay(marker)
        // 給標(biāo)記點(diǎn)添加點(diǎn)擊事件
        marker.addEventListener('click', (e) => {
          執(zhí)行想進(jìn)行的操作(經(jīng)個(gè)人測(cè)試在此處注冊(cè)點(diǎn)擊事件效果最佳,該有的數(shù)據(jù)項(xiàng)都可以獲取)
        })
      })
    },

5.需求1:切換中心點(diǎn)

// 創(chuàng)建一個(gè)函數(shù)處理縮放變化
      this.fn = () => {
        map.centerAndZoom(this.city, 16)
      }
// 用函數(shù)重新執(zhí)行中心點(diǎn),哪里用哪里調(diào)

6.需求2:鼠標(biāo)滑過自定義圖標(biāo)改變

// 創(chuàng)建一個(gè)新圖標(biāo)
 const icon1 = new BMap.Icon(
        require('./assets/image/youtong-icon-03.png'),
        new BMap.Size(20, 30),
        { anchor: new BMap.Size(0, 0) }
      )
// 創(chuàng)建一個(gè)函數(shù)處理圖標(biāo)更換(這里我使用的是遞歸的方式)
      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)
          })
        })
      }

需求3:鼠標(biāo)滑過展示信息窗口

     // 注冊(cè)一個(gè)信息窗口
        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)
        })

文章來源地址http://www.zghlxwxcb.cn/news/detail-630105.html

到了這里，關(guān)于vue中使用百度地圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！