高德api2.0 自定义vue信息窗体显示问题合集前端vue.js高德地图

1、设置锚点没有效果，一直停留在左上位置
【高德api2.0 自定义vue信息窗体显示问题合集】解决思路：
1、给信息窗口添加打开后事件监听
2、在dom节点挂载后触发
3、取信息窗体的宽度和高度
4、跟据要显示位置需求，设置偏移
代码：

//创建信息窗体 const infoWindow = new AMap.InfoWindow({ isCustom: true, //使用自定义窗体 content: this.$refs.HcInfoWindow,//用自定义内容 offset: new AMap.Pixel(0, 0), });

//添加监听 infoWindow.on('open',()=>{ this.updateOffsetHeight(); })

//调整偏移方法 updateOffsetHeight(){ this.$nextTick(()=>{ let {offsetHeight,offsetWidth} = document.getElementById("popcontent"); let height = -(offsetHeight+23); //负数向下移，+23这个数值自定义 let width =-(offsetWidth/2-15); // this.infoWindow.setOffset(new AMap.Pixel(width, height)) })}

2.信息窗体鼠标滚轮事件被地图占用，解决鼠标停留在信息窗体，释放地图的滚轮事件

文章图片

解决思路：
1、鼠标移动到信息窗体，鼠标缩放地图事件被禁用
2、鼠标移除信息窗体，鼠标缩放事件启用
伪代码：

infoWindow.on('mouseover', function(){ map.setStatus({scrollWheel:false}); }); infoWindow.on('mouseout', ()=>{ map.setStatus({scrollWheel:true}); })