如何在React Native中显示Google Map iframe？集成遇阻求助

修复WebView + iframe的问题 #

你的代码存在两个核心问题：

• 所用的Google Maps嵌入URL不完整（!1m18!1m12!1m3!1d3022后缺少完整坐标参数），导致地图无法加载。
• WebView未设置明确宽高样式，可能造成组件无可见渲染区域。

修正后的代码示例：

import { WebView } from 'react-native-webview';

// 替换为你从Google Maps获取的完整嵌入URL
const fullMapEmbedUrl = 'https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022.xxxxxx!2d-73.9857!3d40.7484!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x89c259a70d6e128b%3A0x532e732c38f724f!2sEmpire%20State%20Building!5e0!3m2!1sen!2sus!4v1699999999999!5m2!1sen!2sus';

export default function OfficeMap() {
  return (
    <WebView
      style={{ flex: 1, width: '100%', height: '100%' }}
      originWhitelist={['*']}
      source={{
        html: `<iframe src="${fullMapEmbedUrl}" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy"></iframe>`
      }}
    />
  );
}

注意：

• 完整的嵌入URL可通过Google Maps官网搜索地址后，点击「分享」→「嵌入地图」获取。
• 将iframe宽高设为100%，配合WebView的flex布局，让地图自适应容器尺寸。

更优方案：使用原生地图库 #

iframe内嵌网页的体验与性能均不如原生组件，推荐用react-native-maps直接集成Google Maps：

1. 安装依赖：

npm install react-native-maps
# 或
yarn add react-native-maps

2. 按官方文档配置Android/iOS端的Google Maps API密钥
3. 基础使用示例：

import MapView, { Marker } from 'react-native-maps';

export default function OfficeMap() {
  // 替换为你办公室的经纬度
  const officeCoords = {
    latitude: 40.7484,
    longitude: -73.9857,
  };

  return (
    <MapView
      style={{ flex: 1 }}
      initialRegion={{
        ...officeCoords,
        latitudeDelta: 0.01,
        longitudeDelta: 0.01,
      }}
      provider="google"
    >
      <Marker coordinate={officeCoords} title="我们的办公室" />
    </MapView>
  );
}

该方式能提供流畅的原生交互，支持缩放、标记、导航等功能。

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