@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>)}
}
附上效果图一张

希望对大家有帮助~❤️
温馨提示!!!:在自己开发环境可以正常渲染,然后正式部署到环境上的时候渲染不出来,有个错误提示

解决方式是:找后端人员
设置Content-Security-Policy 允许可以要加载的外部脚本 add_header Content-Security-Policy “script-src ‘self’ https://maps.googleapis.com ‘unsafe-inline’ ‘unsafe-eval’ blob: data:;”;
亲测有效~ ❤️
相关文章:
@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, Mar…...
【MySQL】2.库的操作
库的操作 一.创建数据库1.数据库的编码集 二.查看数据库三.修改数据库四.删除数据库五.数据库的备份和恢复 一.创建数据库 create database [if not exists] db_name [charsetutf8] [collateutf8_general_ci] //创建一个名为db_name的数据库,本质就是在/var/lib/my…...
深入Laravel服务容器:构建灵活应用的秘诀
标题:深入Laravel服务容器:构建灵活应用的秘诀 Laravel框架的服务容器是一个强大的工具,它负责管理类的依赖关系和执行依赖注入(DI)。服务容器是Laravel依赖注入系统的核心,使得应用组件之间的耦合度降低&…...
3.js - 模板渲染 - 金属切面效果
md,狗不学,我学 源码 // ts-nocheck// 引入three.js import * as THREE from three// 导入轨道控制器 import { OrbitControls } from three/examples/jsm/controls/OrbitControls// 导入lil.gui import { GUI } from three/examples/jsm/libs/lil-gui.m…...
【测试】系统压力测试报告模板(Word原件)
系统压力测试,简而言之,是在模拟高负载、高并发的环境下,对系统进行全面测试的过程。它旨在评估系统在面对极端使用条件时的性能表现,包括处理能力、响应时间、资源消耗及稳定性等关键指标。通过压力测试,开发团队能够…...
图片预加载和懒加载
图片预加载 图片预加载是指在页面展示之前提前加载即将使用到的图片资源,以便当用户需要查看时,能够直接从本地缓存中快速渲染,从而提高页面加载速度和用户体验。 原理 图片预加载通过提前将图片下载到浏览器缓存中,当用户实际…...
Java中的数据可视化与图表库选择
Java中的数据可视化与图表库选择 大家好,我是免费搭建查券返利机器人省钱赚佣金就用微赚淘客系统3.0的小编,也是冬天不穿秋裤,天冷也要风度的程序猿! 在现代软件开发中,数据可视化是将抽象数据转化为易于理解的图形化…...
STM32-TIM定时器
本内容基于江协科技STM32视频内容,整理而得。 文章目录 1. TIM1.1 TIM定时器1.2 定时器类型1.3 基本定时器1.4 通用定时器1.4 高级定时器1.5 定时中断基本结构1.6 预分频器时序1.7 计数器时序1.8 计数器无预装时序1.9 计数器有预装时序1.10 RCC时钟树 2. TIM库函数…...
Python OpenCV与霍夫变换:检测符合特定斜率范围的直线
在计算机视觉和图像处理领域,检测图像中的直线是一项常见且重要的任务。OpenCV 提供了许多强大的工具来进行图像处理,其中霍夫变换(Hough Transform)就是用于检测直线的经典方法。本文将介绍如何使用 OpenCV 和霍夫变换来检测图像…...
ubuntu22.04+pytorch2.3安装PyG图神经网络库
ubuntu下安装torch-geometric库,图神经网络 开发环境 ubuntu22.04 conda 24.5.0 python 3.9 pytorch 2.0.1 cuda 11.8 pyg的安装网上教程流传着许多安装方式,这些安装方式主要是:预先安装好pyg的依赖库,这些依赖库需要对应上pyth…...
新型开发语言的试用感受-仓颉语言发布之际
经常听一些媒体介绍一些新型的开发语言,所以最近心血来潮,安装了几种感受了一些。 先看名气,如ziglang,网址为:Home ⚡Zig Programming Language 号称是可以取代C语言的一门新语言,其实我主要是受下面这篇…...
基于字典学习的地震数据降噪(MATLAB R2021B)
稀疏表示基于研究者们提出了许多变换基函数的方法逐渐成型,比如小波域,曲波域,dreamlet 域等,其原理是利用地震信号在变换域内的稀疏性和可分离性以去除噪声。继 Donoho发表非线性去噪方法-小波阈值萎缩方法,在后续的研…...
【Web】
1、配仓库 [rootlocalhost yum.repos.d]# vi rpm.repo ##本地仓库标准写法 [baseos] namemiaoshubaseos baseurl/mnt/BaseOS gpgcheck0 [appstream] namemiaoshuappstream baseurlfile:///mnt/AppStream gpgcheck0 2、挂载 [rootlocalhost ~]mount /dev/sr0 /mnt mount: /m…...
kafka-3
Kafka 消费组 consumer-offsets-N 稀疏索引 Kafka集群 集群搭建 集群启动和验证 Topic的意义 Topic和Partition 分区 副本 集群操作指令 多分区&多副本 多分区消费组 Rebalance机制 Rebalance机制处理流程 Rebalance机制-Range Rebalance机制-RoudRobin Rebalance机制-St…...
MySQL性能优化 二、表结构设计优化
1.设计中间表 设计中间表,一般针对于统计分析功能,或者实时性不高的需求。 2.设计冗余字段 为减少关联查询,创建合理的冗余字段(创建冗余字段还需要注意数据一致性问题) 3.折表 对于字段太多的大表,考…...
用HttpURLConnection复现http响应码405
目录 使用GET方法,访问GET接口,服务端返回405使用GET方法,访问POST接口,服务端返回405使用POST方法,访问GET接口,服务端返回405 使用GET方法,访问GET接口,服务端返回405 发生场景&a…...
2-27 基于matlab的一种混凝土骨料三维随机投放模型
基于matlab的一种混凝土骨料三维随机投放模型,为混凝土细观力学研究提供一种快捷的三维建模源代码。可设置骨料数量,边界距离、骨料大小等参数。程序已调通,可直接运行。 2-27 matlab 混凝土骨料三维随机投放模型 - 小红书 (xiaohongshu.com)…...
ISA95-Part4-业务流程的解析与设计思路
MES/MOM系统实现ISA-95标准的业务流程通常遵循以下思路,并包含一系列内容。 一、功能模块: 1. 需求分析与规划: - 确定业务流程需求,包括订单管理、生产调度、库存控制等,并规划如何将这些流程与MES/MOM系统集成。 2. 系统集成架构设计: - 设计一个系统集成架构,确保M…...
【Spring Cloud】一个例程快速了解网关Gateway的使用
Spring Cloud Gateway提供了一个在Spring生态系统之上构建的API网关,包括:Spring 5,Spring Boot 2和Project Reactor。Spring Cloud Gateway旨在提供一种简单而有效的路由方式,并为它们提供一些网关基本功能,例如&…...
仿哔哩哔哩视频app小程序模板源码
仿哔哩哔哩视频app小程序模板源码 粉色的哔哩哔哩手机视频网页,多媒体视频类微信小程序ui前端模板下载。包含:视频主页和播放详情页。 仿哔哩哔哩视频app小程序模板源码...
PHP和Node.js哪个更爽?
先说结论,rust完胜。 php:laravel,swoole,webman,最开始在苏宁的时候写了几年php,当时觉得php真的是世界上最好的语言,因为当初活在舒适圈里,不愿意跳出来,就好比当初活在…...
【论文笔记】若干矿井粉尘检测算法概述
总的来说,传统机器学习、传统机器学习与深度学习的结合、LSTM等算法所需要的数据集来源于矿井传感器测量的粉尘浓度,通过建立回归模型来预测未来矿井的粉尘浓度。传统机器学习算法性能易受数据中极端值的影响。YOLO等计算机视觉算法所需要的数据集来源于…...
【Go】3、Go语言进阶与依赖管理
前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课,做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程,它的核心机制是 Goroutine 协程、Channel 通道,并基于CSP(Communicating Sequential Processes࿰…...
Android15默认授权浮窗权限
我们经常有那种需求,客户需要定制的apk集成在ROM中,并且默认授予其【显示在其他应用的上层】权限,也就是我们常说的浮窗权限,那么我们就可以通过以下方法在wms、ams等系统服务的systemReady()方法中调用即可实现预置应用默认授权浮…...
【JavaSE】绘图与事件入门学习笔记
-Java绘图坐标体系 坐标体系-介绍 坐标原点位于左上角,以像素为单位。 在Java坐标系中,第一个是x坐标,表示当前位置为水平方向,距离坐标原点x个像素;第二个是y坐标,表示当前位置为垂直方向,距离坐标原点y个像素。 坐标体系-像素 …...
深度学习习题2
1.如果增加神经网络的宽度,精确度会增加到一个特定阈值后,便开始降低。造成这一现象的可能原因是什么? A、即使增加卷积核的数量,只有少部分的核会被用作预测 B、当卷积核数量增加时,神经网络的预测能力会降低 C、当卷…...
深入浅出深度学习基础:从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么?1.1.2 感知机的工作原理 1.2 感知机的简单应用:基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
scikit-learn机器学习
# 同时添加如下代码, 这样每次环境(kernel)启动的时候只要运行下方代码即可: # Also add the following code, # so that every time the environment (kernel) starts, # just run the following code: import sys sys.path.append(/home/aistudio/external-libraries)机…...
数学建模-滑翔伞伞翼面积的设计,运动状态计算和优化 !
我们考虑滑翔伞的伞翼面积设计问题以及运动状态描述。滑翔伞的性能主要取决于伞翼面积、气动特性以及飞行员的重量。我们的目标是建立数学模型来描述滑翔伞的运动状态,并优化伞翼面积的设计。 一、问题分析 滑翔伞在飞行过程中受到重力、升力和阻力的作用。升力和阻力与伞翼面…...
认识CMake并使用CMake构建自己的第一个项目
1.CMake的作用和优势 跨平台支持:CMake支持多种操作系统和编译器,使用同一份构建配置可以在不同的环境中使用 简化配置:通过CMakeLists.txt文件,用户可以定义项目结构、依赖项、编译选项等,无需手动编写复杂的构建脚本…...
