vue+百度地图(vue-baidu-map) 实现绘制多边形可拖拽效果
vue+百度地图 实现绘制多边形可拖拽效果理一下实现效果鼠标拽动地图时,地图可拽动; 鼠标拽动多边形时,地图不可拽动鼠标拽动多边形时,多边形可拽动。首先实现效果1,加个flag控制一下地图的拽动属性,使鼠标停留在多边形上,flag=false即可然后是效果2稍麻烦些,加个flag判断鼠标是否在多边形上拖拽,如果是,记录鼠标经过的经纬度差,分别加在多边形所有点上。核心代码如下:<baidu-m
·
vue+百度地图 实现绘制多边形可拖拽效果
理一下实现效果
- 鼠标拽动地图时,地图可拽动; 鼠标拽动多边形时,地图不可拽动
- 鼠标拽动多边形时,多边形可拽动。
首先实现效果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>
开放原子开发者工作坊旨在鼓励更多人参与开源活动,与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动,如meetup、训练营等,主打技术交流,干货满满,真诚地邀请各位开发者共同参与!
更多推荐
已为社区贡献4条内容
所有评论(0)