vue中使用百度地图-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue中使用百度地图。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

1.安装插件

yarn add vue-baidu-map --save

2.在main.js注册

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

3.在页面使用

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

4.百度地图初始化函数及批量生成自定义图标点

 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.需求1:切换中心点

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

6.需求2:鼠标滑过自定义图标改变

// 创建一个新图标
 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)
          })
        })
      }

需求3:鼠标滑过展示信息窗口

     // 注册一个信息窗口
        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)
        })

文章来源地址https://www.toymoban.com/news/detail-630105.html

到了这里，关于vue中使用百度地图的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！