首页引入地图组件 BmPolygon

<!--（stroke-color="#057af3"，线条颜色 ），（:stroke-weight="2" ，线条宽度） （:fill-color，区域内的填充颜色），（:stroke-opacity="1"，填充的透明度）    -->
  <bm-polygon v-for="(p,index) in PolygonPath" @mousedown="mousedownPoly(p,index,p[index])"
                  @mouseover="PolyHover(p,index,p[index])" @mouseout="mouseoutPoly(p,index,p[index])"
                  :fill-opacity="p.fillOpacity" :key="'p'+index" :path='p' stroke-color="#057af3" :stroke-opacity="1"
                  :stroke-weight="2" :fill-color="PolygonParam.fillColor"></bm-polygon>
<script>
 import BmPolygon from 'vue-baidu-map/components/overlays/Polygon'
 export default {
    name: '',
    components: {
      BmPolygon,
    },methods:{
         mousedownPoly (data, index, key) {        // 鼠标点击区域时触发
        this.plyData = data;

        this.plyIndex = index;

        this.$set(this.PolygonPath[index], `fillOpacity`, 0.7)

        this.$message(this.allNameData[index].name)

        this.$forceUpdate()

      },
 mouseoutPoly (data, index, key) { // 鼠标离开区域操作

        this.$set(this.PolygonPath[index], `fillOpacity`, 0.1)

        this.$forceUpdate()

      },
}
</script>

（注意事项） 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)

        })
          },