@react-google-maps/api实现谷歌地图中添加多边围栏,并可编辑,编辑后可获得围栏各个点的经纬度

先上一张效果图 看看是不是大家想要的效果~ ❤️
由于该功能微微复杂一点,为了让大家精准了解
我精简了一下地图代码
大家根据自己的需求将center值和paths,用setState做活就可以了
在这里插入图片描述

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

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

2.加入项目中

import React, { PureComponent } from 'react';
import { GoogleMap, LoadScript, PolygonF } from '@react-google-maps/api';export class Geofences extends PureComponent<{}, {}> {render() {const key = ''; //谷歌申请的keyconst paths = [[{ lat: -34.397, lng: 150.644 },{ lat: -34.297, lng: 150.744 },{ lat: -34.197, lng: 150.644 },],[{ lat: -34.397, lng: 150.644 },{ lat: -34.297, lng: 150.744 },{ lat: -34.197, lng: 150.644 },]];return (<div style={{ width: '100%', height: '400px' }}><LoadScript googleMapsApiKey={key}><GoogleMapmapContainerStyle={{ width: '100%', height: '400px' }}center={{ lat: -34.397, lng: 150.644 }}zoom={13}>{paths.map((path, index) => {return (<PolygonFpath={path}editable={true}draggable={true}onEdit={(e)=>{const paths = e.getPaths().getArray();const coordinates = paths.map((path:any) => {return path.getArray().map((latLng:any) => {return {lat: latLng.lat(),lng: latLng.lng(),};});});//这就是改变完后的各个点的坐标console.log(coordinates);}}/>);})}</GoogleMap></LoadScript></div>);}
}

运行起来的效果是有两个多边栏,
你拖债任意一个点,都能获得多边围栏每个点的坐标

在做这个需求时有一个小点就是添加一个配送区域(5公里直径内的)矩形围栏
我做的比较简单 大家看看有没有帮助, 也是精简代码。测试效果上相对是精准的

//谷歌,根据经纬度获取以它为中心半径为5公里内的矩形的四个点经纬度getDefalutPoints = (lng: number, lat: number) => {//方法一:不精准// const num = 0.014607; //5公里半径维度// const path1 = `${lng - num},${lat + num}`;// const path2 = `${lng + num},${lat + num}`;// const path3 = `${lng + num},${lat - num}`;// const path4 = `${lng - num},${lat - num}`;// return `${path1};${path2};${path3};${path4}`;//方法二//数字 111 代表的是地球表面上每度纬度大约对应的公里数。这是一个常用的近似值,用于简化地球表面的计算,尤其是当需要快速估算或不需要非常高精度的场合。const radiusKm = 5;const latI = radiusKm / 111; //维度增量const lngI = radiusKm / (111 *Math.cos(lat* Math.PI/180));const zs = `${lng+lngI},${lat+latI}`;const ys = `${lng-lngI},${lat+latI}`;const zx = `${lng-lngI},${lat-latI}`;const yx = `${lng+lngI},${lat-latI}`;const points = `${zs};${ys};${zx};${yx}`;return points;};const lng = 150.644;
const lat =  -34.397;
const defalutPoints = this.getDefalutPoints(lng, lat);
console.log(defalutPoints);

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

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

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

相关文章

[激光原理与应用-97]:激光焊接焊中检测系统系列介绍 - 1 - 什么是焊接以及传统的焊接方法

目录 一、什么是焊接 1.1 概述 1.2 基本原理 二、传统的焊接技术与方法 2.1 手工电弧焊&#xff1a; 1、定义与原理 2、特点 3、焊条类型 4、应用领域 5、安全注意事项 2.2 气体保护焊&#xff1a; 1、原理与特点 2、应用领域 3、气体选择 4、注意事项 2.3 电阻…

高级IO_多路转接之Poll

文章目录 前言一、poll二、poll使用步骤总结 前言 上一章我们学习了select&#xff0c;但是select作为早期的多路转接接口&#xff0c;缺点十分明显&#xff0c;于是又出现poll和epoll等接口&#xff0c;今天我们就来学习一下poll的使用 提示&#xff1a;以下是本篇文章正文内…

60种AI工具用法 学会探索AI的无限可能

外面还在卖的课程&#xff0c;学会探索AI的无限可能&#xff0c;从构建精准的提示词到获取个性化新闻&#xff0c;从快速制作PPT到短视频内容的智能提炼&#xff0c;再到编程、股市分析和视频剪辑&#xff0c;AI工具助您工作学习效率飞跃提升&#xff01; 百度网盘 请输入提取…

2024 世界人工智能大会暨人工智能全球治理高级别会议全体会议在上海举办,推动智能向善造福全人类

2024 年 7 月 4 日&#xff0c;2024 世界人工智能大会暨人工智能全球治理高级别会议-全体会议在上海世博中心举办。联合国以及各国政府代表、专业国际组织代表&#xff0c;全球知名专家、企业家、投资家 1000 余人参加了本次会议&#xff0c;围绕“以共商促共享&#xff0c;以善…

【图像分割】mask2former:通用的图像分割模型详解

最近看到几个项目都用mask2former做图像分割&#xff0c;虽然是1年前的论文&#xff0c;但是其attention的设计还是很有借鉴意义&#xff0c;同时&#xff0c;mask2former参考了detr的query设计&#xff0c;实现了语义和实例分割任务的统一。 1.背景 1.1 detr简介 detr算是第…

基于github.com/emmansun/gmsm库编写的SM2对C 开放的库

go-gmsm cgo库 介绍 基于github.com/emmansun/gmsm库编写的SM2对C 开放的库 特性&#xff1a;非对称加密、不支持跨平台编译 git地址&#xff1a;https://gitee.com/state-secret-series/go-gmsm.git 软件架构 Go、Cgo、mod 安装教程 克隆仓库 git clone https://gite…

香橙派AIpro实测:YOLOv8便捷检测,算法速度与运行速度结合

香橙派AIpro实测&#xff1a;YOLOv8便捷检测&#xff0c;算法速度与运行速度结合 文章目录 香橙派AIpro实测&#xff1a;YOLOv8便捷检测&#xff0c;算法速度与运行速度结合一、引言二、香橙派AIpro简介三、YOLOv8检测效果3.1 目标检测算法介绍3.1.1 YOLO家族3.1.2 YOLOv8算法理…

NDT配准收敛问题

GitHub - abougouffa/ndtpso_slam: ROS package for NDT-PSO, a 2D Laser scan matching algorithm for SLAM SRG NDT Das_Arun_2013.pdf;jsessionid97F7EDB4E8805EFE68D1E46687EF593F (uwaterloo.ca)

上海计算机考研炸了,这所学校慎报!上海大学计算机考研考情分析!

上海大学&#xff08;Shanghai University&#xff09;&#xff0c;简称“上大”&#xff0c;是上海市属、国家“211工程”重点建设的综合性大学&#xff0c;教育部与上海市人民政府共建高校&#xff0c;国防科技工业局与上海市人民政府共建高校&#xff0c;国家“双一流”世界…

【微信小程序开发】微信小程序界面弹窗,数据存储相关操作代码逻辑实现

✨✨ 欢迎大家来到景天科技苑✨✨ &#x1f388;&#x1f388; 养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; &#x1f3c6; 作者简介&#xff1a;景天科技苑 &#x1f3c6;《头衔》&#xff1a;大厂架构师&#xff0c;华为云开发者社区专家博主&#xff0c;…

ArcGIS Pro SDK (七)编辑 12 编辑模版

ArcGIS Pro SDK &#xff08;七&#xff09;编辑 12 编辑模版 文章目录 ArcGIS Pro SDK &#xff08;七&#xff09;编辑 12 编辑模版1 在图层上按名称查找编辑模板2 查找属于独立表的表模板3 当前模板4 更改模板的默认编辑工具5 隐藏或显示模板上的编辑工具6 使用图层创建新模…

how to use Xcode

Xcode IDE概览 Xcode 页面主要分为以下四个部分&#xff1a; 工具栏&#xff08;ToolBar area&#xff09;&#xff1a;主要负责程序运行调试&#xff0c;编辑器功能区域的显示 / 隐藏&#xff1b;编辑区&#xff08;Editor area&#xff09;&#xff1a;代码编写区域&#xf…

140. 好二叉树(卡码网周赛第二十四期(23年腾讯音乐笔试真题))

140. 好二叉树&#xff08;卡码网周赛第二十四期&#xff08;23年腾讯音乐笔试真题&#xff09;&#xff09; 题目描述 小红定义一个二叉树为“好二叉树”&#xff0c;当且仅当该二叉树所有节点的孩子数量为偶数(0 或者 2)。 小红想知道&#xff0c;n&#xff08;1< n <…

vue table表格 ( parseTime-格式化时间)

<el-table-column label"发布时间" width"420px" prop"bidPublishDatetime"><template slot-scope"scope"><span>{{ parseTime(scope.row.bidPublishDatetime, {y}-{m}-{d}) }}</span></template></…

若依代码生成

在若依框架中&#xff0c;以下是这些代码的作用及它们在程序运行中的关联方式&#xff1a; 1. domain.java&#xff1a;通常用于定义实体类&#xff0c;它描述了与数据库表对应的对象结构&#xff0c;包含属性和对应的访问方法。作用是封装数据&#xff0c;为数据的操作提供基…

Richtek立锜科技车规级器件选型

芯片按照应用场景&#xff0c;通常可以分为消费级、工业级、车规级和军工级四个等级&#xff0c;其要求依次为军工>车规>工业>消费。 所谓“车规级元器件”--即通过AEC-Q认证 汽车不同于消费级产品&#xff0c;会运行在户外、高温、高寒、潮湿等苛刻的环境&#xff0c…

澳蓝荣耀时刻,6款产品入选2024年第一批《福州市名优产品目录》

近日&#xff0c;福州市工业和信息化局公布2024年第一批《福州市名优产品目录》&#xff0c;澳蓝自主研发生产的直接蒸发冷却空调、直接蒸发冷却组合式空调机组、间接蒸发冷水机组、高效间接蒸发冷却空调机、热泵式热回收型溶液调湿新风机组、防火湿帘6款产品成功入选。 以上新…

飞利浦的台灯值得入手吗?书客、松下多维度横评大分享!

随着生活品质的持续提升&#xff0c;人们对于健康的追求日益趋向精致与高端化。在这一潮流的推动下&#xff0c;护眼台灯以其卓越的护眼功效与便捷的操作体验&#xff0c;迅速在家电领域崭露头角&#xff0c;更成为了众多家庭书房中不可或缺的视力守护者。这些台灯以其精心设计…

(vue)eslint-plugin-vue版本问题 安装axios时npm ERR! code ERESOLVE

(vue)eslint-plugin-vue版本问题 安装axios时npm ERR! code ERESOLVE 解决方法&#xff1a;在命令后面加上 -legacy-peer-deps结果&#xff1a; 解决参考&#xff1a;https://blog.csdn.net/qq_43799531/article/details/131403987

【C语言】指针剖析(完结)

©作者:末央&#xff06; ©系列:C语言初阶(适合小白入门) ©说明:以凡人之笔墨&#xff0c;书写未来之大梦 目录 回调函数概念回调函数的使用 - qsort函数 sizeof/strlen深度理解概念手脑并用1.sizeof-数组/指针专题2.strlen-数组/指针专题 指针面试题专题 回调函…