高德地图marker拖拽过程中设置Polyline的path

高德地图拖拽marker,重新计算线条path

效果

在这里插入图片描述

 		initLine(item) {
            // 初始化线条
            let { x, y } = item; // 获取土地块的中心区域,线条的起点
            let pixel = this.map.lngLatToContainer(new AMap.LngLat(x, y)); // 获得 Pixel 对
            var path = [
              new AMap.LngLat(x, y), // 当前位置
              this.map.containerToLngLat(new AMap.Pixel(pixel.x, pixel.y - 70)),
            ];
            // 创建折线实例
            const polyline = new AMap.Polyline({
              path: path,
              ...this.polylineStyle,
              zIndex: 99999,
            });
            // 将折线添加至地图实例
            this.map.add(polyline);
            return polyline;
          },
          // 拖拽过程中使用该函数重新计算线条path
          resetLine(event) {
            // 重置线条
            // 获取当前的卡片位置
            let curPosiLngLat = event.target.getPosition();
            const { info } = event.target.getExtData();
            let { x, y } = info; // 获取土地块的中心区域,线条的起点
            const startLngLat = new AMap.LngLat(x, y);
            let endPixel = this.map.lngLatToContainer(curPosiLngLat); // 获得 Pixel 对象
            let endOffsetPixel = { x: endPixel.x, y: endPixel.y }; // 当前位置加上偏移量
            const startPixel = this.map.lngLatToContainer(startLngLat); // 开始位置的容器坐标
            const midPixel = {};
            midPixel.x = endPixel.x;
            midPixel.y = startPixel.y;
            const midLnglat = this.map.containerToLngLat(
              new AMap.Pixel(midPixel.x, midPixel.y)
            );
            let endLngLat = this.map.containerToLngLat(
              new AMap.Pixel(endOffsetPixel.x, endOffsetPixel.y)
            ); // 获得 LngLat 对象
            // 得到新的path
            var path = [
              startLngLat, // 开始位置
              midLnglat,
              endLngLat, // 结束位置
            ];
            const options = {
              path: path,
              zIndex:99999
            };
            // 找到该线条
            const { infoLine } = this.mapCacheList.find(
              (item) =>
                item[this.type] === info[this.type]
            );
            // 重新设置options
            infoLine.setOptions(options);
          },
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值