高德地图-当默认打开InfoWindow信息窗体时，setCenter()无法居中

最近在研究地图的 API，对比了一下 高德地图 和 百度地图，最后选择了高德地图。在开发遇到点小问题，记录一下。

背景

需求功能是，点击任意（维护的）坐标后，跳转到该坐标，并以该坐标为中心，并且默认显示该地址 Marker 的 infoWindow 信息窗体。

问题是，当点击任意坐标后， infoWindow 信息窗体可以默认打开，但是无法将地图中心设置为当前 Marker 的坐标，位置无法居中。用户体验十分不好。

解决方案

问题代码：

const onSelect = (position: number[], title: string) => {  
  const content = `  
    <div style="width: fit-content; padding: 4px; text-align: center;">  
      <b>${title}</b>  
      <br/>  
      <br/>  
      坐标：[${position[0]}, ${position[1]}]  
    </div>`;  
  // 设置坐标为屏幕中心
  map.setCenter(position);  
  const marker = new AMap.Marker({  
    position: position  
  });  
  const infoWindow = new AMap.InfoWindow({  
    isCustom: false, 
    content: content,  
    offset: new AMap.Pixel(0, -35)  
  });  
  
  map.add(marker);  
  // 显示信息窗体
  infoWindow.open(map, new AMap.LngLat(...position));  
  // 信息窗体点击事件
  marker.on('click', (e: any) => infoWindow.open(map, e.target.getPosition()));  
};

解决方案：

const onSelect = (position: number[], title: string) => {  
  const content = `  
    <div style="width: fit-content; padding: 4px; text-align: center;">  
      <b>${title}</b>  
      <br/>  
      <br/>  
      坐标：[${position[0]}, ${position[1]}]  
    </div>`;  
  
  const marker = new AMap.Marker({  
    position: position  
  });  
  const infoWindow = new AMap.InfoWindow({  
    isCustom: false, 
    content: content,  
    offset: new AMap.Pixel(0, -35)  
  });  
  
  map.add(marker);  
  // 显示信息窗体
  infoWindow.open(map, new AMap.LngLat(...position));  
  // 信息窗体点击事件
  marker.on('click', (e: any) => infoWindow.open(map, e.target.getPosition()));  
  // 设置坐标为屏幕中心
  map.setCenter(position);
};

将 infoWindow 信息窗体代码放在设置坐标中心的上面即可

猜测渲染周期导致