【百度商圈】百度商圈功能

先看一下效果：
蓝色边框浅白底的，就是商圈，右上角是用来制作商圈的工具，当然，你也可以不使用工具，在页面初始化时显示商圈

是否添加商圈关闭后：

<!-- 地图控件 -->
<div class="as-scheduling-toolbar">
  <el-form>
    <el-form-item label="是否添加商圈：">
      <el-switch v-model="delivery"  @change="addBlock">添加区域</el-switch>
    </el-form-item>
  </el-form>
</div>
<!-- 左侧筛选条件 -->
<div class="point-left collapse" v-show="chooseMap">
  <el-tabs type="border-card" style="height: 100%;">
    <el-tab-pane label="筛选条件" style="min-height:500px;">
      <el-form :inline="true" :model="queryform" ref="searchForm" class="demo-form-inline">
          <el-form-item>
            <el-autocomplete
              popper-class="my-autocomplete"
              v-model="queryform.areaName"
              :fetch-suggestions="querySearch"
              placeholder="请输入商圈名称"
              @select="handleSelect">

              <template slot-scope="{ item }">
                <div class="name">{{ item.tradeName }}</div>
                <span style="color: #999; font-size:12px; line-height:25px;position: relative; top: -12px;">{{ item.tradeContent }}</span>
              </template>
            </el-autocomplete>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    <el-tab-pane label="点位列表" style="min-height:500px;">
      点位列表
    </el-tab-pane>
  </el-tabs>
</div>
<!-- 左侧筛选按钮 -->
<div :class="['circuit', !chooseMap? 'circuit1':'']" @click="chooseMap = !chooseMap"></div>

初始化显示商圈：

methods: {
    createMap () {
      this.map = new BMap.Map('container') // 设置普通街道为底图

      this.map.addControl(new BMap.ScaleControl()) // 添加比例尺控件 116.226959, lat: 39.940952}
      this.map.centerAndZoom(new BMap.Point(116.325218, 39.977441), 12) // 初始化地图,设置中心点坐标和地图级别。
      this.map.addControl(new BMap.NavigationControl()) // 添加鱼骨控件
      this.map.setCurrentCity('北京') // 设置3D地图显示的城市 此项是必须设置的

      var local = new BMap.LocalSearch(this.map, {
        renderOptions: { map: this.map }
      })
      local.search('餐饮')
      this.map.enableScrollWheelZoom(true) // 开启鼠标滚轮缩放
      this.addTrading() // 添加初始化商圈
    },
    addTrading () {
      // 创建二环
      // 创建经纬度数组
      var secRingCenter = new BMap.Point(116.400244, 39.931757)
      var secRing = [new BMap.Point(116.362875, 39.949459), new BMap.Point(116.378972, 39.956539), new BMap.Point(116.438764, 39.955654), new BMap.Point(116.440488, 39.911836), new BMap.Point(116.365175, 39.905637)]
      // 创建多边形
      var secRingPolygon = new BMap.Polygon(secRing, { strokeColor: '#3cb0d0', strokeWeight: 3, strokeOpacity: 0.5 })
      // 添加多边形到地图上
      this.map.addOverlay(secRingPolygon)

      secRingPolygon.addEventListener('click', (e) => {
        if (this.delivery) {
          this.tradeForm.name = e.target.tradeName || ''
          this.tradeForm.content = e.target.tradeContent || ''
          this.currentLay = e.target
          this.tradeVisable = true
        }
      })
      secRingPolygon.addEventListener('mouseover', (e) => {
        this.tradeName = e.target.tradeName || ''
        this.tradeContent = e.target.tradeContent || ''
        if (this.tradeName !== '') { this.tradeLabel = true }
      })
      secRingPolygon.tradeName = this.tradeName
      secRingPolygon.tradeContent = this.tradeContent

      secRingPolygon.addEventListener('mouseout', () => {
        this.tradeLabel = false
      })

      overlays.push(secRingPolygon)
    },
},

使用工具自定义商圈

// 添加区域
    addBlock (val) {
      if (!val) {
        // 隐藏
        document.getElementsByClassName('BMapLib_Drawing')[0].style.display = 'none'
        let docs = document.getElementsByClassName('BMap_contextMenu')
        for (let i = 0; i < docs.length; i++) {
          docs[i].style.display = 'none'
        }

        document.getElementsByClassName('BMapLib_box')[0].click()
        console.log(document.getElementsByClassName('BMapLib_box')[0])
        return
      } else if (this.drawingManager !== undefined) {
        // 显示
        document.getElementsByClassName('BMapLib_Drawing')[0].style.display = 'block'
        let docs = document.getElementsByClassName('BMap_contextMenu')
        for (let i = 0; i < docs.length; i++) {
          docs[i].style.display = 'block'
        }
        return
      }

      this.editTrade()
      let that = this
      // 商圈添加事件
      let overlaycomplete = function (e) {
        e.overlay.addEventListener('click', () => {
          if (that.delivery) { // 编辑商圈功能是否打开
            that.tradeForm.name = e.overlay.tradeName || ''
            that.tradeForm.content = e.overlay.tradeContent || ''

            that.currentLay = e.overlay
            that.tradeVisable = true
          }
        })
        e.overlay.addEventListener('mouseover', () => {
          that.tradeName = e.overlay.tradeName || ''
          that.tradeContent = e.overlay.tradeContent || ''
          if (that.tradeName !== '') { that.tradeLabel = true }
        })

        e.overlay.addEventListener('mouseout', () => {
          that.tradeLabel = false
        })

        overlays.push(e.overlay)
        console.log(overlays)

        if (that.delivery) { // 编辑商圈功能是否打开
          that.tradeForm.name = e.overlay.tradeName || ''
          that.tradeForm.content = e.overlay.tradeContent || ''

          that.currentLay = e.overlay
          that.tradeVisable = true
        }
        switch (e.drawingMode) {
          case 'polygon': // 编辑多边形
          case 'circle':
            that.onPolygon(e) // 右键菜单
            break
          case 'marker':
            that.onMarker(e)
            break
        }
      }
      var styleOptions = { // 鼠标绘制区域样式
        strokeColor: '#3cb0d0', // 边线颜色。
        fillColor: '#fff', // 填充颜色。当参数为空时，圆形将没有填充效果。
        strokeWeight: 3, // 边线的宽度，以像素为单位。
        strokeOpacity: 0.5, // 边线透明度，取值范围0 - 1。
        fillOpacity: 0.4, // 填充的透明度，取值范围0 - 1。
        strokeStyle: 'solid' // 边线的样式，solid或dashed。
      }
      // 实例化鼠标绘制工具
      this.drawingManager = new BMapLib.DrawingManager(this.map, {
        isOpen: false, // 是否开启绘制模式
        enableDrawingTool: true, // 是否显示工具栏

        drawingToolOptions: {
          anchor: BMAP_ANCHOR_TOP_RIGHT, // 位置
          offset: new BMap.Size(5, 5), // 偏离值
          drawingModes: [
            BMAP_DRAWING_MARKER,
            BMAP_DRAWING_CIRCLE,
            BMAP_DRAWING_POLYGON,
            BMAP_DRAWING_RECTANGLE
          ] // 绘制模式  多边形
        },
        circleOptions: styleOptions, // 圆的样式
        // polylineOptions: styleOptions, // 线的样式
        polygonOptions: styleOptions, // 多边形的样式
        rectangleOptions: styleOptions // 矩形的样式
      })
      // 添加鼠标绘制工具监听事件，用于获取绘制结果
      this.drawingManager.addEventListener('overlaycomplete', overlaycomplete)
    },
    // 多边形右键事件
    onPolygon (e, edit) {
      let squle = '多边形'
      if (e.drawingMode === 'circle') {
        squle = '圆形'
      }
      let that = this
      var polygon = e.overlay || e
      /* -----------------多边形右键删除以及编辑多边形------------------------- */
      var polygonMenu = new BMap.ContextMenu()
      var txtMenuItem = [{
        text: '删除' + squle,
        callback: function () {
          that.map.removeOverlay(polygon)
          overlays.splice(overlays.findIndex((value) => value === polygon), 1) // 数组里删除多边形覆盖物对应的经纬度
        }
      }, {
        text: '编辑' + squle,
        callback: function () {
          polygon.enableEditing()
        }
      }, {
        text: '取消编辑' + squle,
        callback: function () {
          polygon.disableEditing()
        }
      }]
      for (var i = 0; i < txtMenuItem.length; i++) {
        polygonMenu.addItem(new BMap.MenuItem(txtMenuItem[i].text, txtMenuItem[i].callback, 100))
      }

      polygon.addContextMenu(polygonMenu)

      console.log(overlays)
    },
    // 点位右击事件
    onMarker (e, edit) {
      let that = this
      coverlays.push(e.overlay)

      var marker = e.overlay
      /* -----------------标注右键删除-------------------- */
      var markerMenu = new BMap.ContextMenu()
      markerMenu.addItem(new BMap.MenuItem('删除标注 ', function () {
        that.map.removeOverlay(marker)
        var path = e.overlay.getPosition()
        var coverPlan = '' // 获取点的经纬度
        var coverPlanA = '' // 获取所有点的经纬度
        coverPlan = 'lng:' + path.lng + '\n lat:' + path.lat
        coverPlanA += coverPlan
        coverPlanA.replace(coverPlan)

        coverlays.splice(coverlays.findIndex((val) => val === marker), 1) // 数组里删除点覆盖物对应的经纬度

        // console.log(coverlays);
      }))
      marker.addContextMenu(markerMenu)

      marker.addEventListener('click', function (e) {
        that.tradeVisable = true
        var label = new BMap.Label('宝马一号', {
          offset: new BMap.Size(20, -10)
        })
        // 改变marker右边文字以及边框的样式
        label.setStyle(markerStyle)
        marker.setLabel(label)
      })
    },