在vue项目中使用百度地图，并添加覆盖物，多个点标注

原创已于 2022-07-05 11:39:10 修改 · 2.7k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #前端

于 2022-07-05 11:36:31 首次发布

本文介绍如何在Vue项目中集成百度地图并实现街道级地图边界展示。通过自定义点标注和街道覆盖物，实现了详细的地图功能。文章提供了具体实现步骤及代码示例。

在vue项目中使用百度地图，并添加覆盖物，多个点标注

介绍

众所周知百度地图只有区级边界覆盖物数据，因为项目需要街道级的地图边界展示，所以需要自己引入街道数据。如果刚好需要宁波市镇海区的几个街道数据可以看我主页有上传。
以下是效果图

引入

在index.html中直接引入

<script type="text/javascript"
    src="https://api.map.baidu.com/api?type=webgl&v=1.0&ak=你的密钥"></script>

在main.js 中将百度组件注入到Vue的原型里

Vue.prototype.BMapGL = window.BMapGL

正文

//街道JSON数据=格式[{"lng": 121.62442102480463, "lat": 30.014421231162792},{...}]
import Jd_zs from '../assets/json/ZhuangShi.json'
import Jd_gs from '../assets/json/GuiSi.json'
import addicon1 from '../assets/img/add.svg'//自定义点标注的图片

data() {
    return {
      staticLocation: [121.60304, 29.970944],
      JieDaoJson: [//覆盖物数据
        {
          name: '庄市街道',//名字
          site: [121.633417, 29.941699],//坐标中心点
          value: Jd_zs,//街道对应json数据
          opacity: 0.7,//对应覆盖物透明度
        },
        {
          name: '贵驷街道',
          site: [121.624393, 29.985423],
          value: Jd_gs,
          opacity: 0.5,
        },
        //此处省略其他街道数据
      ],
    }
},
mounted() {
    this.initBmap()//初始化地图
    this.initPoint()//批量创建点
    this.funStreet()//批量创建覆盖物
},

methods: {
	//初始化地图
	initBmap() {
	      const that = this
	      const pt = this.staticLocation
	      this.map = new this.BMapGL.Map('allmap')
	      this.map.centerAndZoom(new this.BMapGL.Point(pt[0], pt[1]), 10)
	      this.map.enableScrollWheelZoom(true)
	},
	//批量创建点
	initPoint() {
      const that = this
      this.pointArr.forEach(function (v) {
        createPoint(that, v, addicon1)
      })

      //创建点
      function createPoint(that, data, addicon) {
        // 创建图标
        var myIcon = new that.BMapGL.Icon(addicon, new that.BMapGL.Size(32, 32))
        // 创建Marker标注，使用图标
        var pt = new that.BMapGL.Point(data.site[0], data.site[1])
        that.marker = new that.BMapGL.Marker(pt, {
          icon: myIcon,
        })

        // 设置标签 内容 偏移量
        const label = new that.BMapGL.Label(data.title, {
          offset: new that.BMapGL.Size(10, -10),
        })
        // 标签样式
        label.setStyle({
          border: 'none',
          borderRadius: '3px',
          background: 'rgba(33, 224, 255,0.6)',
          transform: 'translate(0%,0)',
          fontSize: '14px',
          padding: '0 3px',
          color: '#fff',
        })
        // 设置标签
        that.marker.setLabel(label)
        // 将标注添加到地图
        that.map.addOverlay(that.marker)
      }
    },
    // 添加街道覆盖物
    funStreet() {
      const that = this
      this.JieDaoJson.forEach((v) => {
        // 层
        let Str = []
        v.value.forEach((k) => {
          Str.push(new this.BMapGL.Point(k.lng, k.lat))
        })
        var myPolygon = new this.BMapGL.Polygon(Str, {
          fillColor: '#428ffc',
          fillOpacity: v.opacity,
          trokeColor: '#fff',
        })
        myPolygon.disableMassClear()//禁止被清楚
        // 字
        var textLabel = new this.BMapGL.Label(v.name, {
          offset: new this.BMapGL.Size(-30, 0),
          position: new this.BMapGL.Point(v.site[0], v.site[1]),
          enableMassClear: false,//禁止被清楚
        })
        textLabel.setStyle({
          color: '#fff',
          background: 'rgba(0,0,0,0.2)',
          border: 'none',
          padding: '3px 5px',
          borderRadius: '3px',
          fontSize: '22px',
        })
        this.ls4 = setTimeout(() => {
          that.map.addOverlay(myPolygon)
          that.map.addOverlay(textLabel)
        }, 100)
      })
    },
}