react native中如何使用webView调用腾讯地图选点组件

react native中如何使用webView调用腾讯地图选点组件

    • 效果示例图
    • 代码示例
    • 备注

效果示例图

在这里插入图片描述

代码示例

import React, {useEffect, useRef, useState} from 'react';
import {Modal, StyleSheet} from 'react-native';
import {pxToPd} from '../../common/js/device';
import {WebView} from 'react-native-webview';

const TestWebView = () => {
  const webViewRef = useRef(null);
  const [address, setAddress] = useState(null);

  useEffect(() => {
    return () => {};
  }, []);
  return (
    <>
      <WebView
        ref={webViewRef}
        javaScriptEnabled={true}
        source={{
          uri: 'https://apis.map.qq.com/tools/locpicker?search=1&type=1&key=KUXBZ-F7P6D-IVF4W-H2L5A-LSX35-4NBX2&referer=myapp',
        }}
        onMessage={event => {
          let addressMsg = JSON.parse(event.nativeEvent.data);
          console.log('[miao]', addressMsg);
          console.log('[miao]', addressMsg?.poiaddress);
          setAddress(() => addressMsg?.poiaddress);
        }}
        onLoadEnd={() => {
          webViewRef.current.injectJavaScript(
            "window.addEventListener('message', function(event) {window.ReactNativeWebView.postMessage(JSON.stringify(event.data));}, false);",
          );
        }}
      />
    </>
  );
};
const styles = StyleSheet.create({});

export default TestWebView;

备注

请使用自己的key值,到腾讯地图官网去申请

想要下载react-native-webview
npm install react-native-webview

腾讯地图选点组件官网

react-native-webview

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/430287.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

私有化部署自己的ChatGPT,免费开源的chatgpt-next-web搭建

随着AI的应用变广&#xff0c;各类AI程序已逐渐普及&#xff0c;尤其是在一些日常办公、学习等与撰写/翻译文稿密切相关的场景&#xff0c;大家都希望找到一个适合自己的稳定可靠的ChatGPT软件来使用。 ChatGPT-Next-Web就是一个很好的选择。它是一个Github上超人气的免费开源…

产品介绍二维码怎么做?多种内容组合二维码的方法

现在扫描二维码来获取内容的方式越来越常见&#xff0c;比如很多的产品介绍都会做成二维码图片后&#xff0c;在产品包装、传单、展板等印刷展示。而一般展示的内容类型多为文本、图片、视频等内容&#xff0c;那么这些类型的内容放入一个二维码中展示如何实现呢&#xff1f; …

白酒:制曲工艺的环境因素与微生物生态关系

在豪迈白酒的酿造过程中&#xff0c;制曲工艺是非常关键的一环。而环境因素与微生物生态关系对于制曲工艺的成功与否起着决定性的作用。云仓酒庄深谙此道&#xff0c;在制曲过程中注重环境因素的调控&#xff0c;并深入研究微生物生态关系&#xff0c;以提升豪迈白酒的品质和风…

Jmeter 命令启动 —— 动态参数化!

Jmeter命令行参数 1、在Linux中&#xff0c;使用非GUI的方式执行Jmeter。若需更改参数&#xff0c;必须先编辑jmx文件&#xff0c;找到对应变量进行修改&#xff0c;比较麻烦。 因此&#xff0c;可以参数化一些常用的变量&#xff0c;直接在Jmeter命令行进行设置 2、参数 -J…

draw.io设置矩形四个边的有无

第一步创建一个矩形 选中矩形&#xff0c;并编辑样式 然后在编辑框中输入 verticalLabelPositionbottom;verticalAligntop;html1;shapemxgraph.basic.rect;right1;将原来的内容覆盖掉 然后点击应用 然后发现 点击那四个设置就可以了

MyCAT集群——MyCAT2如何配置读写分离

先搭载MySQL一主两从 192.168.20.110MyCAT192.168.20.111Master192.168.20.112slave1192.168.20.113slave2 配置就不写了&#xff0c;比较基础&#xff0c;写一下步骤 1.进入mysql配置文件或者其子配置文件&#xff0c;添加server_id,开启gtidgtid_modeON,enforce-gtid-cons…

智慧公厕:改变城市公共卫生管理的未来

现代城市发展快速&#xff0c;人口不断增加&#xff0c;公共卫生管理面临着严峻的挑战。传统公厕的建设、管理和使用模式已经无法满足日益提高的卫生与环保需求。然而&#xff0c;随着科技的进步与智能化的发展&#xff0c;智慧公厕正成为一种全新的解决方案&#xff0c;为城市…

(十六)【Jmeter】取样器(Sampler)之测试活动(Test Action)

简述 操作路径如下: JMeter中的测试活动取样器实际上并不是一个具体的取样器类型,而是一种对测试计划中的多个取样器进行组合和执行的活动。常常被用作定时器,在某个请求之后等待多长时间。 参数说明 Logical Action on Thread(在线程上的逻辑操作) Pause Duration(mil…

Python知识汇总

重要链接&#xff1a; matplotlib库&#xff1a;matplotlib — Matplotlib 3.5.1 documentation DataFrame库&#xff1a;DataFrame — pandas 2.2.1 documentation (pydata.org) Python Matplotlib 实现散点图、曲线图、箱状图、柱状图示例&#xff1a;Python Matplotlib 实…

计算机网络-网络安全(二)

1.应用层安全协议&#xff1a; S-HTTP或SHTTP&#xff08;Sec HTTP&#xff09;&#xff0c;安全超文本传输协议&#xff0c;是HTTP扩展&#xff0c;使用TCP的80端口。HTTPS&#xff1a;HTTPSSL&#xff0c;使用TCP的443端口。和TLS&#xff08;传输层安全标准&#xff09;是双…

Linux conntrack和iptables技术解析

Linux虚拟文件系统管理技术 1. netfilter解析1.1 netfilter的基础原理1.2 netfilter的相关hook 2. conntrack解析2.1 conntrack的基础原理2.2 conntrack的表记录解析 3. iptables解析3.1 iptables基础原理3.2 融合conntrack表的iptables规则 4. 疑问和思考4.1 conntrack和iptab…

从零开始学单片机,该怎么入门?

从零开始学单片机&#xff0c;该怎么入门&#xff1f; 在开始前我分享下我的经历&#xff0c;我刚入行时遇到一个好公司和师父&#xff0c;给了我机会&#xff0c;一年时间从3k薪资涨到18k的&#xff0c; 我师父给了一些 电气工程师学习方法和资料&#xff0c;让我不断提升自己…

神经网络推理优化方法总结

&#x1f380;个人主页&#xff1a; https://zhangxiaoshu.blog.csdn.net &#x1f4e2;欢迎大家&#xff1a;关注&#x1f50d;点赞&#x1f44d;评论&#x1f4dd;收藏⭐️&#xff0c;如有错误敬请指正! &#x1f495;未来很长&#xff0c;值得我们全力奔赴更美好的生活&…

C语言操作符详解(一)

一、操作符的分类 • 算术操作符&#xff1a; 、- 、* 、/ 、% • 移位操作符:<< >> • 位操作符: & | ^ • 赋值操作符: 、 、 - 、 * 、 / 、% 、<< 、>> 、& 、| 、^ • 单⽬操作符&#xff1a; &#xff01;、、--、&、*、、…

Android Studio开发(一) 构建项目

1、项目创建测试 1.1 前言 Android Studio 是由 Google 推出的官方集成开发环境&#xff08;IDE&#xff09;&#xff0c;专门用于开发 Android 应用程序。 基于 IntelliJ IDEA: Android Studio 是基于 JetBrains 的 IntelliJ IDEA 开发的&#xff0c;提供了丰富的功能和插件…

[Redis]——Spring整合Redis(SpringDataRedis)

⭐准备工作&#xff1a; 确保Redis服务已启动idea开发环境 ⭐Redis整合步骤&#xff1a; 1.pom文件引入依赖 2.yml文件配置连接信息 3.修改Redis序列化方式 4.注入RedisTemplate 使用 小知识&#xff1a; Spring整合的Redis可以将Object对象自动序列化成字符串&#xff0…

数学建模【灰色关联分析】

一、灰色关联分析简介 一般的抽象系统,如社会系统、经济系统、农业系统、生态系统、教育系统等都包含有许多种因素&#xff0c;多种因素共同作用的结果决定了该系统的发展态势。人们常常希望知道在众多的因素中&#xff0c;哪些是主要因素&#xff0c;哪些是次要因素;哪些因素…

高级统计方法 第5次作业

作业评阅&#xff1a; 概念 1.问题 2.问题&#xff08;略&#xff09; 4.问题&#xff08;略&#xff09; &#xff08;a&#xff09;问题&#xff08;略&#xff09; 10%&#xff0c;忽略 X < 0.05和 X > 0.95的情况。 &#xff08;b&#xff09;问题&#xff08;略…

金田金業: 避险情绪骤升 黄金暴力拉升

现货黄金周一(3月4日)亚市早间开盘于2082美元/盎司&#xff0c;最高2119.86美元/盎司&#xff0c;最低2079.44美元/盎司&#xff0c;收盘2114.28美元/盎司&#xff0c;全天波幅约40美金&#xff0c;当日涨幅1.51%。 【基本面】 周一(3月4日)无重要数据公布&#xff0c;投资者关…

TPM引领智能制造新篇章:赋能企业转型升级

在智能制造日益成为工业发展主流趋势的今天&#xff0c;全面生产维护&#xff08;Total Productive Maintenance&#xff0c;简称TPM&#xff09;作为一种先进的管理理念和方法&#xff0c;正逐渐展现出其为企业实现智能制造赋能助力的巨大潜力。TPM不仅关注设备的维护和保养&a…