高德地图.js增加覆盖面并点击改位置出现弹窗

效果如图
在这里插入图片描述
在面的事件里面添加方法

    // 面
    getPlygonAssets() {
      let this_ = this;
      //获取面数据
      this.$api.operatinMaintenance.getAssetsList({ elType: 3, orgId: 17, type: 1 }).then((res) => {
        if (res.code == '200') {
          let list = res.data;
          let map = this_.amapManager.getMap();
          for (var i in list) {
            let vo = list[i];
            // console.log(vo,555555);
            let geom = vo.geom;
            let geomArr = geom.split(' ');
            let path = [];
            //处理面坐标
            for (var j = 0; j < geomArr.length - 1; j++) {
              if (geomArr[j]) {
                // let point = []
                let gArr = geomArr[j].split(',');
                //将原来wgs84坐标系转换成GCJ02坐标系
                let point = wgs84togcj02(Number(gArr[0]), Number(gArr[1]));
                // for(var k in gArr){
                //   point.push(Number(gArr[k]));
                // }
                if (point.length > 0) {
                  path.push(point);
                }
              }
            }
            var maps = new AMap.Map('container', {
              resizeEnable: true,
            });
            //绘制面对象,被选中的河流的对象增加覆盖物
            var polygon = new AMap.Polygon({
              map: map,
              path: path,
              strokeColor: '#52c8a0', // 描绘河流的边框的颜色
              strokeWeight: 6,
              strokeOpacity: 0.7, // 描边的透明度
              fillOpacity: 1, // 覆盖物的透明度
              fillColor: '#52c8a0', //被选中的河流的颜色
              zIndex: 50,
            });
            //  给覆盖物增加点击事件
            polygon.on('click', showInfoP);
            function showInfoP(e) {
              //在指定位置打开信息窗体
              //创建信息窗口
              var infoWindow = new AMap.InfoWindow({
                isCustom: true, //使用自定义窗体
                content: `${vo.aname}`,
                offset: new AMap.Pixel(-15, -25),
              });
              //打开信息窗口
              infoWindow.open(map, [e.lnglat.lng, e.lnglat.lat]); //后面的参数指的是经纬度,在此显示窗口
            }

            //将绘制的面对象添加到地图上
            map.add(polygon);
          }
        }
      });
    },

猜你喜欢

转载自blog.csdn.net/anny_mei/article/details/119931860