@react-google-maps/api实现谷歌地图嵌入React项目中,并且做到点击地图任意一处,获得它的经纬度

1.第一步要加入项目package.json中或者直接yarn install它都可以

"@react-google-maps/api": "^2.19.3",

2.加入项目中

import AMapLoader from '@amap/amap-jsapi-loader';import React, { PureComponent } from 'react';
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';interface ScalSelectStates {/*** 当前选择位置经纬度*/centerPosition: any[];
}export class ScalSelect extends PureComponent<{}, ScalSelectStates> {constructor(props: any) {super(props);this.state = {centerPosition: [116.409969,39.982387],};}//谷歌地图点击方法handleGoogleClick = (event: any) => {if (event && event.latLng) {const centerPosition = [event.latLng.lng().toFixed(6), event.latLng.lat().toFixed(6)];this.setState({centerPosition,});}};render() {const {centerPosition} = this.state;const lng = Number(centerPosition[0]);const lat = Number(centerPosition[1]);const googleKey = ''; //申请的谷歌keyreturn (<div style={{ height: '400px', width: '100%' }}><LoadScript googleMapsApiKey={googleKey}><GoogleMapmapContainerStyle={{ width: '100%', height: '400px' }}zoom={11}center={{ lat, lng }}onClick={this.handleGoogleClick}><Marker position={{ lat, lng }} /></GoogleMap></LoadScript></div>)}
}

附上效果图一张
在这里插入图片描述

希望对大家有帮助~❤️

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【有哪些GPU算力租用平台值得推荐】

&#x1f308;个人主页: 程序员不想敲代码啊 &#x1f3c6;CSDN优质创作者&#xff0c;CSDN实力新星&#xff0c;CSDN博客专家 &#x1f44d;点赞⭐评论⭐收藏 &#x1f91d;希望本文对您有所裨益&#xff0c;如有不足之处&#xff0c;欢迎在评论区提出指正&#xff0c;让我们共…

徒手绘制 Android 通用进度条

拖动条&#xff08;FlexSeekBar&#xff09;&#xff0c;在Android的各个地方都非常常用&#xff0c;本文旨在自研一套通用的进度条&#xff0c;非常适合车载App使用 样式如下&#xff1a; 使用示例 <!--默认用法--> <com.max.android.ui.seekbar.FlexSeekBarandroi…

【test】小爱同学通过esp32控制电脑开关

文章目录 一、环境准备二、开关机原理数据传输框架 三、环境搭建1.巴法云平台设置2.米家设置3.windows网络唤醒设置4.搭建esp32开发环境并部署&#xff08;1&#xff09;新建项目&#xff08;2&#xff09;导入esp32库&#xff08;3&#xff09; 添加库&#xff08;4&#xff0…

fluwx插件实现微信支付

Flutter开发使用fluwx插件实现微信支付&#xff0c;代码量不多&#xff0c;复杂的是安卓和iOS的各种配置。 在 pubspec.yaml 文件中添加fluwx依赖 fluwx: ^4.5.5 使用方法 通过fluwx注册微信Api await Fluwx().registerApi(appId: wxea7a1c53d9e5849d, universalLink: htt…

基于SpringBoot的大学生租房系统

该系统主要实现了用户和房主通过系统注册用户&#xff0c;登录系统后能够编辑自己的个人信息、查看首页&#xff0c;房屋信息&#xff0c;房屋评价&#xff0c;公告资讯&#xff0c;个人中心&#xff0c;后台管理&#xff0c;意见反馈等&#xff0c;还可以对后台进行操作&#…

2024年显著性检测部分论文及代码汇总(3)

ICML Size-invariance Matters: Rethinking Metrics and Losses for Imbalanced Multi-object Salient Object Detection code Abstacrt&#xff1a;本文探讨了显著性检测中评价指标的尺寸不变性&#xff0c;尤其是当图像中存在多个大小不同的目标时。作者观察到&#xff0c;…

双指针算法:快速排序模拟实现

目录 1.思路解析 2&#xff1a;代码展示 1.思路解析 使用双指针pre和cur 指针cur用于检测符合条件的数据 cur和pre数据发生交换用于将符合条件的数据&#xff08;比key小&#xff09;向左扔 一轮循环结束时&#xff0c;以pre为分界点&#xff0c;除去key&#xff0c;pre左边的…

物联网IOT,讲的什么?

想象一下,当你早晨醒来,智能咖啡机已经根据你的习惯准备好了香浓的咖啡;家中的温度自动调节至最舒适的状态;出门前,智能冰箱提醒你哪些食材需要补充……这些场景不再是科幻电影里的虚构,而是物联网技术为我们带来的现实便利。 物联网的概念与起源 物联网,顾名思义,是指…

1.HI3559AV100 官方开发板sample运行

1.内核、文件系统部分 有关uboot&#xff0c;kernel&#xff0c;rootfs部分就不赘述&#xff0c;直接在SDK提供的镜像文件进行烧录即可。2.编译MPP下的sample运行 实验前准备&#xff1a;通过NFS方式挂载到开发板与主机通信传输文件 驱动和库的部署&#xff1a;把MPP目录下的…

单例模式详解:概念与实用技巧

目录 单例模式单例模式结构单例模式适用场景单例模式优缺点练手题目题目描述输入描述输出描述输入示例输出示例提示信息题解 单例模式 单例模式是一种创建型设计模式&#xff0c; 让你能够保证一个类只有一个实例&#xff0c; 并提供一个访问该实例的全局节点。 只有一个实例的…

震惊!运气竟能如此放大!运气的惊人作用,你了解吗?

芒格&#xff1a;得到你想要的东西&#xff0c;最保险的办法&#xff0c;就是让自己配得上你想要的那个东西。今天仔细想了想这句话&#xff0c;他其实说的是无数成功人士的心声 —— “我配得上&#xff01;” 美剧《绝命毒师》有个导演叫文斯吉里根&#xff08;Vince Gilliga…

大疆2025校招内推

需要内推码的请留言哦 期待你的加入

windows@资源管理器中的地址栏@访问共享文件夹的各种方法@管理共享文件夹

文章目录 资源管理器中的地址栏可以访问什么访问共享文件夹&#x1f47a;UNC路径资源管理器打开共享文件夹纯命令行方式访问共享文件夹 共享文件夹相关操作查看所有已经共享的文件夹&#x1f47a;停止某个文件的共享 共享文件夹的访问控制补充匿名访问问题&#x1f60a;强制启用…

吴恩达深度学习笔记:机器学习策略(2)(ML Strategy (2)) 2.5-2.6

目录 第三门课 结构化机器学习项目&#xff08;Structuring Machine Learning Projects&#xff09;第二周&#xff1a;机器学习策略&#xff08;2&#xff09;(ML Strategy (2))2.5 数据分布不匹配时的偏差与方差的分析&#xff08;Bias and Variance with mismatched data di…

师从IEEE fellow|博士后加拿大阿尔伯塔大学成行

V老师指定申请加拿大&#xff0c;优先对方出资的博士后&#xff0c;如果外方无资助&#xff0c;也可以自筹经费&#xff0c;但要求必须是博士后头衔。最终我们为其落实了加拿大阿尔伯塔大学的postdoctoral fellow&#xff08;博士后研究员&#xff09;&#xff0c;尽管是无薪职…

2024亚太杯中文赛数学建模选题建议及各题思路来啦!

大家好呀&#xff0c;2024年第十四届APMCM亚太地区大学生数学建模竞赛&#xff08;中文赛项&#xff09;开始了&#xff0c;来说一下初步的选题建议吧&#xff1a; 首先定下主基调&#xff0c; 本次亚太杯推荐大家选择B题目。C题目难度较高&#xff0c;只建议用过kaiwu的队伍…

仓颉——申请内测、环境搭建、编译测试

2024年6月21日&#xff0c;华为仓颉正式公开发布。 不少同学看过仓颉白皮书后&#xff0c;都在找SDK从哪下载&#xff0c;HelloWorld怎么跑。仓颉公众号也及时发布了内测的方式&#xff0c;我也亲自走了一遍整个流程&#xff0c; 一&#xff0c;申请内测 关注“仓颉编程语言…

暗潮短视频:成都柏煜文化传媒有限公司

暗潮短视频&#xff1a;涌动的新媒体力量 在数字化时代的浪潮中&#xff0c;短视频以其独特的魅力和无限的潜力&#xff0c;迅速成为新媒体领域的一股强大力量。而在这片繁荣的短视频领域中&#xff0c;成都柏煜文化传媒有限公司“暗潮短视频”以其独特的定位和深邃的内容&…

Beyond Low-frequency Information in Graph Convolutional Networks

推荐指数: #paper/⭐⭐⭐ #paper/&#x1f4a1; 发表于:AAAI21 简称:FAGCL 问题提出背景: GCN常常使用低频信息,但是在现实中,不仅低频信息重要,高频信息页重要 如上图,随着类间链接的增加,低频信号的增强开始变弱,高频信号的增强开始增加. 作者贡献: 不仅低频信号重要,高…

智能井盖采集装置 开启井下安全新篇章

在现代城市的脉络之下&#xff0c;错综复杂的管网系统如同城市的血管&#xff0c;默默支撑着日常生活的有序进行。而管网的监测设备大多都安装在井下&#xff0c;如何给设备供电一直是一个难题&#xff0c;选用市电供电需经过多方审批&#xff0c;选用电池供电需要更换电池包&a…