高德api2.0 自定义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});
          })