高德地图面积测量在地图上的面积块上增加清除功能

已于 2022-03-08 16:14:24 修改
阅读量4.7k 收藏
点赞数 2
分类专栏： 高德 文章标签： 前端
于 2020-11-19 21:59:01 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38312808/article/details/109825709
版权

前言

业务需求用到了高德地图的鼠标工具的测量距离和测量面积，其中测量距离绘制出来后地图上有按钮可以清除，但是面积画完后没有清空按钮，如下图：

测量距离距离
测量距离
参考连接

codepen在线预览

产品提出需求，面积画完后也要在地图上有个清除。

一、说明

1.使用的高德版本为1.4.1；
2.需要使用高德的插件为MouseTool、OverlayGroup；

二、直接上代码

1.html

代码如下（示例）：

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" type="text/css">
    <style>
        html, body, #container {
    
            height: 100%
        }

        .btn {
    
            width: 6rem;
            margin: 0 1rem 0 4.5rem
最低0.47元/天 解锁文章
shino_1125
关注
专栏目录
002：vue+leaflet 加载多种形式的高德地图
大剑师兰特的GIS世界
09-08 2207
本示例的目的是介绍演示如何在vue+leaflet中添加高德地图，有多种形式，分别是高德路网图、高德卫星影像图、高德矢量地图等。点击查看本专栏内容目录列表。
高德地图清除上一次操作遗留的Polygon覆盖物
qq_19249021的博客
05-19 4679
首先先说我目前的场景。我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。 1. 项目痛点 我目前项目中：一个地图划分了很多区块，每个区块都是Polygon覆盖物，用来制作鼠标滑动高亮效果。同时点击项目其他地方某处，也会在覆盖物上显示一个小方块，这个小方块我也是使用Polygon做的。如下图： 高亮区域和白色方块区域都是覆盖物。 我重新添加白色方块覆盖物的时候会.
高德地图面积测量工具
09-26
由于项目的需要，需要用到高德地图的测量面积功能，其实高德地图官方已经提供了测量面积的工具，但是感觉有点不太方便，于是在原来的测量面积工具的基础上进行一点补充。我想要的效果是在地图上绘制的多边形区域上提供一个关闭按钮，点击关闭按钮结束面积测量，于是，在原来的测量面积的基础上加入了关闭按钮。
高德地图面积测量小工具
热门推荐
hgq0916的博客
09-26 4万+
由于项目的需要，需要用到高德地图的测量面积功能，其实高德地图官方已经提供了测量面积的工具，但是感觉有点不太方便，于是在原来的测量面积工具的基础上进行一点补充，由于时间的原因，写的比较粗糙，其实有很多值得改进的地方，不过不影响使用。 先来看看高德地图官方测量面积的实现效果： 使用AMap.MouseTool插件的measureArea方法来实现面积测量，测量结束后，如果想要关闭面积测量，需要...
高得地图计算区域面积
丘色果
06-09 3136
使用AMap.GeometryUtil.ringArea计算区域，返回数据以平方米为单位。 https://developer.amap.com/demo/javascript-api/example/calcutation/ring-area <!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" c..
百度地图api 点击标注后跳转页面
lhw112233的博客
10-13 1913
百度地图api 标注点击跳转页面 初始化地图 window.onload = function(){ //得到所有点，包括点的id、经纬度、跳转地址链接 //jd、 wd、href getPoints(); //初始化地图 initMap(); } var dList = new Array(); function getPoints(){ jQuery.ajax({ type: "POST", dataType: "json", async:fal
高德地图 根据经纬度计算面积和判断一个点是否在圈内
06-12
高德地图 1，根据经纬度计算面积 2，判断一个点是否在圈内
地图显示面积距离,地图显示距离和实际距离,JavaScript
09-10
本话题主要关注如何使用Leaflet地图库来实现地图上显示面积和距离的功能，并结合高德地图API进行实际应用。 首先，Leaflet是一个轻量级的JavaScript库，专门用于创建移动设备友好的交互式地图。它提供了丰富的地图...
高德地图怎么画圈_高德地图 Javascript API 入门（二）
weixin_39900830的博客
01-15 3907
高德地图 Javascript API 入门(二)鼠标工具插件测量距离JSmap.plugin(["AMap.MouseTool"],function () {var mouseTool=new AMap.MouseTool(map);mouseTool.rule();});预览测量面积JSmap.plugin(["AMap.MouseTool"],function () {var mouseTo...
【学习记录】使用高德地图API开发一个简单基础的WebGIS系统(GIS考研院校专题地图网站)
weixin_46346674的博客
01-05 8391
高德地图API实现一个简单基础的WebGIS，功能有图层管理、路径规划、POI搜索、热力图、点图层交互、上下文菜单等。
高德地图图形面积计算
winny0323的博客
11-18 2812
绘制图形 ` 绘制图形 `
高德地图面积计算公式
Adobe Chow 的博客
06-12 1万+
高德地图面积计算公式 判断一个点是否在圈范围内 java代码 1，根据不规则图形的边界经纬度获取这个封闭图形围成的面积     高德面积测量网址: https://lbs.amap.com/api/javascript-api/example/mouse-operate-map/measure-area/ 高德坐标拾取网址：https://lbs.amap.com/console/sho...
高德地图多边形覆盖物添加、获取、删除
weixin_34306676的博客
11-26 1485
最近在做有关地图的项目 汇总一下 方便以后使用 不喜勿喷 上图是覆盖物绘制完成之后的编辑状态 引入高德地图js <script src="https://webapi.amap.com/maps?v=1.4.10&key=yourkey&plugin=AMap.Autocomplete&plugin=AMap.PolyEditor"></sc...
高德地图AMap.MouseTool插件多次测距不能清除bug
最新发布
TarkuNi的博客
05-25 1448
1.F12探针查看元素，发现是多了overlay和几个marker，然后就想把多出来的overlay和marker存入缓存然后hide()，结果定位的marker莫名其妙取不出来，只隐藏了marker对应的content文字部分。AMap.MouseTool插件是一个很有用的插件，可以在地图上画折线测量距离，也可以在地图上画区域测量面积，这些在客户的一些高级需求里经常出现，最近使用出现了bug，此bug在官网的示例里也能重现。3.在地图上点击测量出一个折线距离。7.在地图上再点击测量出一个折线距离。
高德地图js 开发三：多边形的绘制与清除，添加提示信息，判断点和图形的关系
欧巴酱的CSDN
08-06 3045
InitMap(11, [114.312151, 30.58454]);//默认武汉中心坐标 //地图初始化 function InitMap(zoom, arr) { map = new AMap.Map('container', { zoom: zoom,//级别 center: arr,//中心点坐标 viewMode: '3D'//使用3D视图 .
转载~高德地图绘制图形并得到面积
BiangBaing的博客
08-04 1903
本文为高德地图在vue项目中的实际应用。绘制图形并得到面积
高德地图，多边形绘制，编辑，坐标地址是否在多边形内
u010683991的博客
01-28 3239
高德地图，多边形绘制，编辑，坐标地址是否在多边形内
高德地图使用鼠标工具(mouseTool)画覆盖物折线(mouseTool.polyline)，光标使用十字架(crosshair)类型，不断出现closehand小手图标干扰
yy_onway的博客
08-15 1万+
今天在使用高德地图的时候，使用鼠标工具进行地图范围折线标注，但是发现鼠标在画第二个点，鼠标落下的时候会自动请求这个URLhttp://webapi.amap.com/theme/v1.3/closedhand.cur，如图：请求返回的是鼠标悬浮的小手(.cur光标文件)，如下图： 然后介绍一下这个小手什么时候它会显示:经过我的测试，发现它在我的鼠标在移到我绘制的线和正在绘制的线上面的时候显示为...
高德地图 多边形绘制 测量面积并截图
05-17
要在高德地图上绘制多边形并测量面积，并截取截图，可以按照以下步骤进行操作： 1. 打开高德地图网页版或者手机APP，在地图上找到要绘制多边形的地点，放大地图到合适的比例尺。 2. 在地图上点击一点，作为多边形的第一个点，然后继续点击其他点，逐渐绘制多边形。最后一次点击回到起点，形成闭合的多边形。 3. 点击多边形上方的“测量”按钮，选择“面积”选项，即可看到该多边形的面积大小。 4. 如果需要截取该多边形的截图，可以在手机APP中按下电源键和音量键同时截取全屏截图；在网页版中按下“Print Screen”键截取整个屏幕，或使用截图工具截取指定区域。 5. 如需保存截图，可以将截图复制到其他应用程序中，或者在手机APP中进入“我的”->“截图”进行查看和保存。在网页版中，可以将截图保存到本地计算机中。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值