关于前端:高德api20-自定义vue信息窗体显示问题合集

1、设置锚点没有成果，始终停留在左上地位

解决思路：
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});
          })