react native 结合 react-native-webview 使用地图选点组件

原创已于 2023-06-02 16:26:52 修改 · 579 阅读

3 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react native #react.js #javascript

收录于

于 2023-06-02 16:19:37 首次发布

文章介绍了一种在ReactNative应用中通过WebView集成腾讯地图的选点定位功能。开发者提供了一个简洁的代码示例，利用WebView加载腾讯地图API，并通过onMessage和onLoadEnd事件处理用户选择的位置信息。用户需要替换示例中的腾讯地图key。

因项目需要用户选点定位，获取用户选择的位置，在网上搜了很久都没有搜到可以copy的方案。

看到唯一个使用的是中间网页实现的，感觉有点复杂。于是研究了大半天，新的方案看下面的代码，简单美观！！！贡献给需要的老铁们。。。

复制代码后需要更改自己的腾讯key.

运行版本号：

"react": "18.2.0",

"react-native": "0.71.3",
"react-native-webview": "^11.26.1"

完整代码


  let webView: any;
  //  腾讯选点组件文档
  // https://lbs.qq.com/webApi/component/componentGuide/componentPicker
  return (
    <WebView
      ref={view => (webView = view)}
      javaScriptEnabled={true}
      source={{
        uri: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=xxx&referer=myapp',
      }}
      onMessage={event => {
        console.log(event);
        console.log(JSON.parse(event.nativeEvent.data));
      }}
      onLoadEnd={() => {
        webView.injectJavaScript(
          "window.addEventListener('message', function(event) {window.ReactNativeWebView.postMessage(JSON.stringify(event.data));}, false);",
        );
      }}
    />
  );