Google 地图在 iOS13 上显示“抱歉，我们这里没有图像”

Question

在运行 iOS 13 的 iPhone SE 上运行时，Google 地图会短暂显示图像约 1 秒，然后显示错误：“抱歉，我们这里没有图像”。它发生在所有地方、所有缩放级别。 但是，运行 iOS 14 或更高版本的设备上不会出现此问题。

• 设备：iPhone SE
• 操作系统：iOS 13
• 浏览器：Safari
• @googlemaps/react-wrapper 版本：1.1.35
• Nextjs13

API 密钥有效并已启用 Maps JavaScript API。 该问题发生在稳定的互联网连接和 HTTPS 上。 添加完整政策

示例代码：

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;

将 Maps JavaScript API 版本降级至 3.56 可暂时解决该问题。然而，这只是一个临时解决方案。

<Wrapper apiKey="YOUR_API_KEY&v=3.56" render={render}>
    <MyMapComponent />
</Wrapper>

有关此问题的任何线索表示赞赏。谢谢！

Answer 1

我相信这是由 2024 年 5 月下旬发布的 Google Maps Javascript API 版本 3.57 更新引起的。

图像图块现在以 .webp 格式提供，许多运行旧版本 Safari 的设备不支持它！

https://caniuse.com/?search=webp

https://developers.google.com/maps/documentation/javascript/releases#3.57.2