vue 中绘制多个区域（vue-baidu-map）以及点击其中某个区域做的操作

首页引入地图组件 BmPolygon

（注意事项） PolygonPath 数组 单个区域数据格式一维数组，多个区域的话需要二维数组才行 不然不识别(下面方法是获取后端数据来显示多个区域的数据做的处理，后端格式根据具体业务来处理，这里只做参考)

getMarkerScope () {  // 获取坐标范围
        let _this = this
        this.$http.get('./static/json/area.json',
          {
            headers: this.COMMON.headerJson
          }).then(function (response) {

          let res = response.data.result

          if (response.data.status == 1) {

            _this.areaIndex(res);

            let pointArray = [],splitArr = [],allAreaData = [];

            for (let p = 0; p < res.length; p++) {

              if(p==0){

                allAreaData.push(res[0].shapePgis.split('@'))   //  默认第一条数据是显示 所有范围

              }

                splitArr.push(res[p].shapePgis.split('@'))      // 把有@符号的数据 拆分出来

            }

            _this.allArea(allAreaData);

            let newarr = [],newArr2=[],newArr3 =[],newArr4 =[],newArr5 = [];


            for (let i = 0; i < splitArr.length; i++) {

              for (let j = 0, l = splitArr[i].length; j < l; j++) {

                if(splitArr[i].length>1){

                  newarr.push(splitArr[i][j])

                }else{

                  newarr.push(splitArr[i][j])

                }
              }
            }




            for (let i = 0; i < newarr.length; i++) {

                 newArr2.push(newarr[i].split(','))
            }


            for (let i = 0; i <  newArr2.length; i++) {  // 去除最左边的空格

              newArr3[i] = new Array();

              for (let j = 0, l = newArr2[i].length; j < l; j++) {

                newArr3[i].push(newArr2[i][j].replace(/(^\s*)/g, ''))

              }

            }


            for (let i = 0; i < newArr3.length; i++) {  // 匹配到空格 替换成逗号

              newArr4[i] = new Array();

              for (let j = 0, l = newArr3[i].length; j < l; j++) {

                newArr4[i].push(newArr3[i][j].replace(/\s/, ','))

              }
            }


            // 组装数据
            for (let i = 0; i < newArr4.length; i++) {
              newArr5[i] = new Array();
              for (let j = 0, l = newArr4[i].length; j < l; j++) {

                if (newArr4[i][j].length > 0) {

                  newArr5[i].push({lng: newArr4[i][j].split(',')[0], lat:newArr4[i][j].split(',')[1]})

                }

              }
            }


            for (let i = 0; i < newArr5.length; i++) {

              newArr5[i]['fillOpacity'] = 0.1   // 默认区域背景透明度

            }

            _this.PolygonPath = newArr5

            var point = new BMap.Point(_this.PolygonPath[0][1].lng, _this.PolygonPath[0][2].lat)

            _this.map.centerAndZoom(point, 14)

            _this.map.enableAutoResize()




          } else {
            _this.$message({
              type: 'error',
              message: response.data.msg
            })
          }
        }).catch(function (error) {

          console.log(error)

        })
          },

最终的效果图

QQ截图20210119111335.png

点击某个区域显示深色

1611026156(1).jpg

具体不懂的 可以联系我 [email protected]

有什么不对的地方 还请大家指点指点