本站只提供技术知识分享,不提供详细开发教程及其步骤。如有需要可留言提问 : )

解决vue-amap高德地图多边形编辑拖动时卡顿的问题

VUE deam 2262℃ 0评论

WX20210309-231355@2x

vue-amap高德地图多边形在可编辑状态下时有高亮的圆点和暗一点的圆点,如图所示,如果直接拖动暗的圆点将会导致卡顿无法拖动,解决方法:

将path转义后赋值即可解决问题,示例如下:

<el-amap-polygon v-for="(polygon, index) in distributionArea" :key="index.toString()" :vid="index"
                 :ref="`polygon_${index}`"
                 :path="JSON.parse(JSON.stringify(polygon.effectArea))"
                 :editable="polygonIndex === index"
                 fillColor="rgba(21, 91, 212, 0.1)"
                 :borderWeight="2"
                 strokeColor="rgb(21, 91, 212)"
                 :events="{
                   click: ()=> {
                     return selectPolygon(index)
                   },
                   adjust: (event) => {
                     return changePolygonArea(index, event)
                   }
                 }"
></el-amap-polygon>

代码中polygon.effectArea为多边形的点坐标,JSON.parse(JSON.stringify(polygon.effectArea))的作用就是使其值不双向绑定,即可解决。

本文由 原创编译,转载请注明出处:http://www.90tec.com/vue/117.html

本站部分内容来自网络,如有侵权,请联系我们进行处理,转载本站文章请注明出处!
喜欢 (73)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址