高德地图通过中心点绘制矩形

最新推荐文章于 2024-04-29 08:52:23 发布
最新推荐文章于 2024-04-29 08:52:23 发布
阅读量2k 收藏 1
点赞数 1
文章标签： 高德地图 坐标 矩形
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_43634982/article/details/108597693
版权

通过中心点绘制矩形（高德地图为例）

原理：通过高德地图提供的API，LngLat的offset方法实现。

// 简单实现绘制正方形，side 正方形边长，单位米
// 若需要绘制其他矩形，需自行修改代码
function centerPointGetFourPoint = ({
    lat, lng }, side = 1000) => {
   
  const centerPoint = <
最低0.47元/天 解锁文章
IT~少年人
关注
vue3 - 实现高德地图标记点位置并绘制圆圈雷达扩散并标注半径值效果，vue3高德地图上圈选定位并标记半径范围，在地图上选中地址点位置后周围画圆形类似水波纹雷达图（高德地图圆形围栏，详细示例源码）
高级前端工程师
04-03 7890
vue3，高德地图画圆动态绘制显示圆半径，动态绘制显示圆半径地图上画圈显示半径，动态显示隐藏圆，地图画圆并且获取圆心坐标和半径，打标记并圈出范围，vue3高德地图如何在地图上画一个圆圈，展示标记位置周边，绘制自定义区域，高德地图怎么半径画圆，地图画圆测距定位，高德地图绘制弧线 高德地图画圆形区域，高德地图标记范围圆圈，VUE3高德地图显示圆形区域并在区域边上标注半径，vue高德地图怎么半径画圆，在地图上圈选标记半径范围，地图绘制圆形以及显示半径地图上画圈显示半径，VUE3实现高德地图绘制自定义区域，vue3
高德地图搜索、拖拽 查询地址
weixin_43569405的博客
04-20 1318
demo-效果图 代码–（引用的地图，key值换成你自己的） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图搜索与拖拽选址</title> <style> #mapContainer{ position: relative; width: calc(100vw-20px);
高德地图 API 实现 自定义创建多个可拉伸锚点矩形。
03-19
原生 JavaScript 仿 有赞商户后台，介入高德地图，实现地图自定义区域矩形划分并绑定 ui 层，几乎每行代码都有注释，方便修改理解。 适用多个项目领域，如：外卖送货、共享单车区域划分、配送商品等。 纯前端JavaScript demo代码，不含任何后端代码，需要自己添加 http 请求即可
android 高德地图画多边形，已知中心点 宽高画矩形 ，实际距离 千米转地图坐标距离
qq_36355271的博客
09-24 2179
项目中用到mapabc 绘制矩形区域。客户只能手动选择中心点，并填写区域的宽和高，切单位为km。要求实时显示规划区域。 记录笔记。 第一步找到地图绘制多边形api polygon = map.addPolygon(new PolygonOptions() .addAll(createRectangle(marker.getPosition(), 1, 1))//绘制多边形顶点坐标 .fillColor(0x1A1677FF)//填充颜色 .stroke
高德地图, 根据长/宽/角度 绘制矩形 polygon
qq_41792905的博客
04-12 1663
created(){ map.off('click', this.drawPolygon) }, methods: { // 点击地图绘制矩形polygon drawPolygon(e) { // 地图点击坐标 const lnglat = { lon: e.lnglat.getLng(), lat: e.lnglat.getLat() } // ...
使用高德地图绘制矩形网格，显示行政区域。
u013773114的博客
12-06 7286
高德地图绘制矩形网格欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Ma...
【高德地图】 覆盖物/画点/画折线/画多边形/画矩形/画圆
Xiang_Gong_Ya_的博客
09-09 1290
btnwidth;margin;width;;//监听draw事件可获取画好的覆盖物var;
高德地图实现矩形围栏绘制和编辑
weixin_43569405的博客
04-25 1824
demo-效果图 全部代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>地图搜索与拖拽选址</title> <style> #mapContainer{ position: relative; width: calc(100vw-20px); height: calc(1
高德地图实现绘制覆盖物，自定义右键菜单
02-26
绘制圆形通常使用`AMap.Circle`类，通过指定中心点坐标、半径以及样式属性来创建。矩形则可以通过创建两个对角点坐标来实现，利用`AMap.Polygon`类创建一个四边形并设置其为正方形。多边形的绘制同样使用`AMap....
高德 android 多边形中心点,完美起航-android高德地图画多边形，已知中心点宽高画矩形，实际距离千米转地图坐标距离...
weixin_42358409的博客
05-28 661
项目中用到mapabc 绘制矩形区域。客户只能手动选择中心点，并填写区域的宽和高，切单位为km。要求实时显示规划区域。记录笔记。 第一步找到地图绘制多边形apipolygon = map.addPolygon(new PolygonOptions().addAll(createRectangle(marker.getPosition(), 1, 1))//绘制多边形顶点坐标.fillColor(0...
vue 高德地图 绘制工具的封装实现绘制 矩形 、圆形、多边形、点标记、折线 覆盖物 并编辑
05-07
1：实现对圆形、多边形、点标记、折线 等的绘制； 2：支持单个绘制 或者 多个绘制的选择； 3：支持对绘制后的图形进行删除； 4：支持对绘制后的图形进行编辑，调整； 5：支持根据图形数据显示到地图上，进行后续操作（删除，编辑）； 6：支持获取绘制后的所有覆盖物数据，并返回； 7：支持封装为单个组件，多处调用；
高德地图中新建矩形进行图形编辑时无法编辑成功的bug AMap.MouseTool,AMap.RectangleEditor,AMap.Rectangle
haliboti的博客
11-29 2505
高德地图中新建矩形进行图形编辑时无法编辑成功的bug
高德地图--矩形的编辑
weixin_30595035的博客
10-31 504
在高德地图的多边形编辑中，可以通过拖拽在地图上生成圆，多边形，折线等，并且可以得出圆心、多边形顶点坐标等信息，但不能编辑矩形。我们利用高德地图api中的折线（AMap.Polyline）来编辑矩形。 //首先定义矩形的初始位置坐标 var arr = [ [115.724036,36.786033], [115.775203,36.786033], ...
php 使用高德地图(一) 画多边形及编辑 获取坐标 (简单总结)
西卡卡的博客
04-18 5470
首次使用高德api的话要先申请一个高德的key 主要说明: 1. 高德地图展示 2. 高德地图点击获取坐标 3. 高德地图鼠标绘制多边形 4. 高德地图鼠标 编辑多边形并获取坐标 <style> .map-list{float: left; margin-left: 10px;} .pbot10{ padding-bottom: 10px;} ...
vue3结合高德地图实现圆、矩形、多边形的绘制和编辑
weixin_43552291的博客
03-06 2299
Vue3结合高德地图实现圆、矩形、多边形的绘制和编辑
根据高德地图 多边形 获取该区域的中心
weixin_44446223的博客
03-11 2808
参数 [[113.049055,23.273062],[113.922468,23.605693],[114.230085,22.615453],[112.697493,22.954773],[112.851301,23.484833]] calculateCenter(lnglatarr) { var total = lnglatarr.length; var X = 0, Y = 0, Z = 0; lnglatarr.map((it
高德地图在vue3项目中使用：实现画矢量图、编辑矢量图
最新发布
一个韩韩韩
04-29 1880
高德地图实现图形操作
Android高德地图设置Marker旋转角度.
热门推荐
圣西罗的红与黑
07-04 1万+
1.代码 marker.setRotateAngle(360-(float) dir); 2.注意 高德地图设置旋转角度是以正北为起点,逆时针旋转的.     是逆时针的...........    所以转化成顺时针效果要用360做差.
vue 高德地图api 利用mousetool绘制矢量图形
04-06
Vue 高德地图 API 提供了 `AMap.MouseTool` 类，可以用来绘制矢量图形。下面是一个简单的示例： ``` <template> <div id="map-container" style="height: 500px;"></div> </template> <script> export default { data() { return { map: null, mouseTool: null }; }, mounted() { // 加载地图 this.map = new AMap.Map('map-container', { zoom: 13, // 缩放级别 center: [116.397428, 39.90923] // 地图中心点 }); // 创建 MouseTool 实例 this.mouseTool = new AMap.MouseTool(this.map); // 监听绘制事件 AMap.event.addListener(this.mouseTool, 'draw', e => { // 获取绘制的矢量图形对象 const shape = e.obj; // 在地图上显示矢量图形 this.map.add(shape); }); }, methods: { // 开始绘制矢量图形 startDraw(type) { this.mouseTool[type](); } } }; </script> ``` 在上面的示例中，我们首先创建了一个地图实例并将其渲染到页面上。然后，我们创建了一个 MouseTool 实例，并在绘制事件中获取绘制的矢量图形对象并将其添加到地图上。最后，我们提供了一个 `startDraw` 方法，用于开始绘制不同类型的矢量图形。 可以通过调用 `startDraw` 方法来开始绘制矢量图形。例如，要绘制一个圆形，可以在模板中添加一个按钮并将其与 `startDraw` 方法关联： ``` <template> <div> <div id="map-container" style="height: 500px;"></div> <button @click="startDraw('circle')">绘制圆形</button> </div> </template> ``` 这将在地图上启动圆形绘制工具。其他可用的绘制工具包括 `rectangle`（矩形）、`polygon`（多边形）和 `polyline`（折线）。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值