Google Maps API：如何等待Cloud-based styling应用完成后再显示地图？

先给地图容器加个初始隐藏的样式，用过渡动画避免突然出现的生硬感：

#map {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

初始化地图时指定你的云地图ID，然后监听mapstyle_changed事件——这个事件会在云样式加载完成并应用到地图后触发，这时再显示地图：

function initMap() {
  const mapEl = document.getElementById('map');
  const map = new google.maps.Map(mapEl, {
    center: { lat: -34.397, lng: 150.644 },
    zoom: 8,
    mapId: '你的云地图ID' // 替换成实际的云地图ID
  });

  // 监听样式加载完成事件，只触发一次
  google.maps.event.addListenerOnce(map, 'mapstyle_changed', () => {
    mapEl.style.opacity = '1';
  });

  // 加个兜底逻辑，防止样式事件未触发的情况
  google.maps.event.addListenerOnce(map, 'tilesloaded', () => {
    setTimeout(() => {
      if (mapEl.style.opacity !== '1') {
        mapEl.style.opacity = '1';
      }
    }, 500);
  });
}

为什么不用idle事件？ #

idle事件是在地图视图稳定（比如缩放、平移结束）时触发，这个时机早于云样式的加载完成，所以会出现默认样式先显示的问题。

额外优化方案（可选） #

如果担心mapstyle_changed事件因某些原因不触发，可以结合getMapStyle()方法轮询检查样式状态：

google.maps.event.addListenerOnce(map, 'tilesloaded', () => {
  const checkInterval = setInterval(() => {
    const currentStyle = map.getMapStyle();
    // 云样式加载完成后，getMapStyle会返回非空的样式数组
    if (currentStyle && currentStyle.length > 0) {
      clearInterval(checkInterval);
      mapEl.style.opacity = '1';
    }
  }, 100);

  // 3秒超时兜底，避免无限等待
  setTimeout(() => {
    clearInterval(checkInterval);
    mapEl.style.opacity = '1';
  }, 3000);
});

这样就能确保地图只有在云样式加载好之后才显示，彻底解决两种样式切换的突兀感。

内容的提问来源于stack exchange，提问作者Richard Kennard