iOS13版iPhone SE上Google Maps显示‘无可用影像’问题求助

问题背景 #

在搭载iOS 13的iPhone SE设备上，使用Safari浏览器运行基于Next.js 13、@googlemaps/react-wrapper v1.1.35开发的页面时，Google Maps会先短暂显示约1秒影像，随后弹出错误提示："Sorry, we have no imagery here"。该问题在所有地点、所有缩放级别下均会出现，但iOS 14及以上版本设备无此问题。

已知前提：

• API密钥有效且已启用Maps JavaScript API
• 问题在稳定网络及HTTPS环境下仍会发生
• 已添加完整安全策略
• 降级Maps JavaScript API至3.56可临时解决，但需长期方案

示例代码：

import { Wrapper, Status } from "@googlemaps/react-wrapper";
import React, { useRef, useEffect } from "react";

const render = (status) => {
  if (status === Status.LOADING) return <div>Loading...</div>;
  if (status === Status.FAILURE) return <div>Error loading maps</div>;
  return null;
};

const MyMapComponent = () => {
  const ref = useRef();

  useEffect(() => {
    const map = new window.google.maps.Map(ref.current, {
      center: { lat: -34.397, lng: 150.644 },
      zoom: 14,
    });
  }, []);

  return <div ref={ref} style={{ height: "400px", width: "100%" }} />;
};

const MapWrapper = () => (
  <Wrapper apiKey="YOUR_API_KEY" render={render}>
    <MyMapComponent />
  </Wrapper>
);

const Home = () => (
  <div>
    <h1>My Google Map</h1>
    <MapWrapper />
  </div>
);

export default Home;

可能的解决线索 #

1. 修复Safari 13的JavaScript语法兼容性 #

iOS 13的Safari对部分ES6+特性（如可选链?.、空值合并??）支持不完善，项目代码或@googlemaps/react-wrapper内部可能使用了这类特性导致运行异常。可通过Babel配置转译降级语法，确保代码兼容iOS 13环境。

2. 调整地图初始化时机 #

当前代码中useEffect空依赖数组可能导致地图在DOM未完全就绪时初始化。尝试改用useLayoutEffect，并增加DOM节点及API加载状态的判断，确保初始化时机稳定：

const MyMapComponent = () => {
  const ref = useRef();

  useLayoutEffect(() => {
    // 确保DOM节点存在且Google Maps API已加载完成
    if (ref.current && window.google?.maps) {
      const map = new window.google.maps.Map(ref.current, {
        center: { lat: -34.397, lng: 150.644 },
        zoom: 14,
      });
    }
  }, []);

  return <div ref={ref} style={{ height: "400px", width: "100%" }} />;
};

3. 指定兼容iOS 13的Maps API版本 #

@googlemaps/react-wrapper默认加载最新版Maps JavaScript API，而新版API可能对iOS 13 Safari存在兼容性问题。尝试通过version参数指定介于3.56和最新版之间的稳定版本（需参考Google Maps API版本日志确认兼容版本）：

<Wrapper apiKey="YOUR_API_KEY" render={render} version="3.57">
  <MyMapComponent />
</Wrapper>

4. 检查Safari隐私与安全设置 #

iOS 13 Safari的跨域资源策略或隐私设置可能阻止地图瓦片加载：

• 确认内容安全策略（CSP）已允许https://*.googleapis.com、https://*.gstatic.com等域名的资源加载
• 临时关闭Safari的"阻止跨站跟踪"选项，测试是否恢复正常

5. 查看Safari控制台的详细错误 #

连接iOS 13设备到Mac，使用Safari开发者工具查看控制台输出，可能存在未捕获的JavaScript异常（如DOM尺寸错误、API异步回调失败等），这些异常可能是导致地图加载中断的根本原因。

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