vue+百度地图 实现绘制多边形可拖拽效果


理一下实现效果

  1. 鼠标拽动地图时,地图可拽动; 鼠标拽动多边形时,地图不可拽动
  2. 鼠标拽动多边形时,多边形可拽动。

首先实现效果1,加个flag控制一下地图的拽动属性,使鼠标停留在多边形上,flag=false即可
然后是效果2稍麻烦些,加个flag判断鼠标是否在多边形上拖拽,如果是,记录鼠标经过的经纬度差,分别加在多边形所有点上。

核心代码如下:

<baidu-map
	@mousemove="moveEvent"
	@rightclick="rightClickEvent"
	:dragging="mapDragging">
	<bm-polygon
		:path="polygonPath"
		:editing="true"
		@mouseover="mapDragging=false"
		@mouseout="mapDragging=true"
		@mousedown="areaDragging=true"
		@mouseup="areaDragging=false"/>
</baidu-map>
<script>
  export default{
    data(){
      return{
        mapDragging: true,//允许地图拖动
        areaDragging: false,//允许区域拖动
        polygonPath:[//多边形区域
          {lng: xxx, lat: yyy},
          {lng: xxx, lat: yyy},
          {lng: xxx, lat: yyy}
        ],
        mouseLocation: {lng: 0, lat: 0}
      }
    },
    methods:{
      //多边形区域拖拽
      moveEvent(e){
        if(this.areaDragging){
          if(this.mouseLocation.lng == 0 && this.mouseLocation.lat == 0){
            this.mouseLocation.lng = e.point.lng
            this.mouseLocation.lat = e.point.lat
            return
          }
          const newLng = e.point.lng,
            newLat = e.point.lat,
            lngDiff = newLng - this.mouseLocation.lng,
            latDiff = newLat - this.mouseLocation.lat
          this.polygonPath.forEach((item)=>{
            item.lng += lngDiff
            item.lat += latDiff
            item.lng = Math.floor(item.lng * 100000) / 100000
            item.lat = Math.floor(item.lat * 100000) / 100000
          })
          this.mouseLocation.lng = newLng
          this.mouseLocation.lat = newLat
          return
        }
        if(this.mouseLocation.lng != 0 || this.mouseLocation.lat != 0){
          this.mouseLocation.lng = 0
          this.mouseLocation.lat = 0
        }
      },
  }
</script>
Logo

开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!

更多推荐