当前位置: 首页 > Web前端 > HTML

高德api2.0自定义vue信息表单展示问题合集

时间:2023-03-28 11:30:28 HTML

1.设置锚点没有效果,一直停留在左上位置。解决思路:1、信息窗打开后添加事件监听2、dom节点挂载后触发3、获取信息窗的宽高4、按照要求显示位置要求,设置偏移代码://create信息窗口constinfoWindow=newAMap.InfoWindow({isCustom:true,//使用自定义表单内容:this.$refs.HcInfoWindow,//使用自定义内容偏移量:newAMap.Pixel(0,0),});//添加监听infoWindow.on('open',()=>{this.updateOffsetHeight();})//调整偏移方法updateOffsetHeight(){this.$nextTick(()=>{let{offsetHeight,offsetWidth}=document.getElementById("popcontent");letheight=-(offsetHeight+23);//负数向下移动,+23为自定义letwidth=-(offsetWidth/2-15);//this.infoWindow.setOffset(newAMap.Pixel(width,height))})}2.信息窗的鼠标滚轮事件被地图占用,所以鼠标停留在信息窗Form,释放地图的滚轮事件解决思路:1.鼠标移动到信息窗,鼠标缩放地图事件被禁用。2、鼠标移开信息窗口,启用鼠标缩放事件。伪代码:infoWindow.on('mouseover',function(){map.setStatus({scrollWheel:false});});infoWindow.on('mouseout',()=>{map.setStatus({scrollWheel:true});})

猜你喜欢