Vue 使用高德地图添加多边形

 // 初始化地图

    initAmap() {

      var map = new AMap.Map('container', {

        zoom: 13, // 级别

        // center: [114.429094, 23.110974], // 初始化地图中心点位置

        center: [this.userInfo.companyLng, this.userInfo.companyLat], // 公司所在的经纬度

        viewMode: '3D' // 使用3D视图

      })

      this.map = map

    },

// 向后端接口获取多边形的经纬度，此时后端传过来的经纬度格式为："114.413034,23.089792;114.415609,23.089851;114.414267,23.088055"

    async getFence() {

      const res = await getFence()

      let pointsArr = []

      if (res.code == 200) {

        pointsArr = res.data.points.split(';')

      }

      let newArr = []

      pointsArr.forEach(item => {

        item = item.split(',')

        newArr.push([Number(item[0]), Number(item[1])])

      })

      this.addPolygon(newArr)

    },

//绘制多边形

addPolygon(newArr) {

      const polygon = new AMap.Polygon({

       //每个多边形的格式必须为[ [经度，维度],[经度，维度] ]

        path: newArr,

        strokeColor: 'red',

        strokeWeight: 1,

        fillOpacity: 0.5,

        fillColor: '#dbd9d5',

        zIndex: 50

      })

      this.map.add(polygon)

    },

效果如图所示：