如何在 React Native 中显示 Google 地图 Iframe？

Question

我一直在尝试将 Google Map iframe 集成到我的 React Native 应用程序中，但遇到了问题。我尝试按照文档使用react-native-webview库，但它没有按预期工作。我的目标只是在我的应用程序中的 Google 地图上显示办公室地址。

我的代码：-

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

    <WebView
          originWhitelist={['*']}
          source={{ html: '<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3022" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>' }}
        />

我也尝试过 RenderHTML，但它对我不起作用。

Answer 1

我尝试了你的代码，但给我错误

Google Maps Platform rejected your request. Invalid request. Invalid 'pb' parameter.

所以我尝试了我的代码，它看起来不错

const MapScreen = () => {
    return (
      <View style={styles.container}>
        <WebView
          originWhitelist={['*']}
          source={{ html: `<html>
          <body>
            <iframe width="600" height="450" frameborder="0" style="border:0"
      src="https://www.google.com/maps/embed/v1/place?q=The+Westin+Turtle+Bay+Resort+%26+Spa%2C+Mauritius&key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU" allowfullscreen></iframe>
          </body>
      </html>` }}
          style={styles.map}
        />
      </View>
    );
  };
  
  const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    map: {
      flex: 1,
    },
  });

希望上面的代码工作正常

如何在 React Native 中显示 Google 地图 Iframe？

问题描述投票：0回答：1

1个回答

最新问题

如何在 React Native 中显示 Google 地图 Iframe？

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1