【高德地图】 覆盖物/画点/画折线/画多边形/画矩形/画圆

在这里插入图片描述

官方示例

https://lbs.amap.com/demo/javascript-api/example/mouse-operate-map/mouse-draw-overlayers

<!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%}.input-item{height: 2.2rem;}.btn{width: 6rem;margin: 0 1rem 0 2rem;}.input-text{width: 4rem;margin-right:1rem;}</style><title>鼠标工具绘制</title></head><body><div id='container'></div><div class='info'>操作说明:圆和矩形通过拖拽来绘制,其他覆盖物通过点击来绘制</div><div class="input-card" style='width: 24rem;'><div class="input-item"><input type="radio" name='func' checked="" value='marker'><span class="input-text">画点</span><input type="radio" name='func' value='polyline'><span class="input-text">画折线</span><input type="radio" name='func' value='polygon'><span class="input-text" style='width:5rem;'>画多边形</span></div><div class="input-item"><input type="radio" name='func' value='rectangle'><span class="input-text">画矩形</span><input type="radio" name='func' value='circle'><span class="input-text">画圆</span></div><div class="input-item"><input id="clear" type="button" class="btn" value="清除" /><input id="close" type="button" class="btn" value="关闭绘图" /></div></div><script src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值&plugin=AMap.MouseTool"></script><script type="text/javascript">var map = new AMap.Map('container',{zoom:14});var mouseTool = new AMap.MouseTool(map); //监听draw事件可获取画好的覆盖物var overlays = [];mouseTool.on('draw',function(e){overlays.push(e.obj);}) function draw(type){switch(type){case 'marker':{mouseTool.marker({//同Marker的Option设置});break;}case 'polyline':{mouseTool.polyline({strokeColor:'#80d8ff'//同Polyline的Option设置});break;}case 'polygon':{mouseTool.polygon({fillColor:'#00b0ff',strokeColor:'#80d8ff'//同Polygon的Option设置});break;}case 'rectangle':{mouseTool.rectangle({fillColor:'#00b0ff',strokeColor:'#80d8ff'//同Polygon的Option设置});break;}case 'circle':{mouseTool.circle({fillColor:'#00b0ff',strokeColor:'#80d8ff'//同Circle的Option设置});break;}}}var radios = document.getElementsByName('func');for(var i=0;i<radios.length;i+=1){radios[i].onchange = function(e){draw(e.target.value)}}draw('marker')document.getElementById('clear').onclick = function(){map.remove(overlays)overlays = [];}  document.getElementById('close').onclick = function(){mouseTool.close(true)//关闭,并清除覆盖物for(var i=0;i<radios.length;i+=1){radios[i].checked = false;}}</script></body>
</html>

应用

        <div style="margin-top: 10px;" class="button-item" @click="handleShowLine":id="mapChange === 3 ? 'line1' : 'line'"></div><div style="margin-top: 10px;" class="button-item" @click="handleShowCircle":id="mapChange === 4 ? 'circle1' : 'circle'"></div>
// type 画的类型linePolygon(type) {// 创建MouseTool实例var mouseTool = new AMap.MouseTool(map);console.log(mouseTool, 'mouseTool');let that = this// 鼠标在地图上画了之后获取画的图形的坐标,在这之前需要实例化mouseTool.polygon()方法this.AMap.Event.addListener(mouseTool, 'draw', function (e) {// console.log(e, 'eee');let arr = e.obj.getPath();//获取坐标// console.log(arr, 'arr');let polyList = []let polyList1 = []polyList = arr.map((item, index) => {return {lat: item.lat,lon: item.lng}})// 格式转换polyList1 = arr.map((item, index) => {return [item.lng, item.lat]})// 画完多边形之后,可接口获取多边形内点queryP({}).then((res) => {console.log(res, 'resss');that.Ponit= res.datamouseTool.close(true)//关闭,并清除覆盖物// [【高德地图】根据经纬度多边形的绘制(可绘制区域以及任意图形)](https://blog.csdn.net/Xiang_Gong_Ya_/article/details/132775837?csdn_share_tail=%7B%22type%22:%22blog%22,%22rType%22:%22article%22,%22rId%22:%22132775837%22,%22source%22:%22Xiang_Gong_Ya_%22%7D)document.getElementById('close').onclick = function () {mouseTool.close(true)//关闭,并清除覆盖物console.log(111);// 清空地图内容window.map.clearMap()}})});function draw(type) {switch (type) {case 'line': {mouseTool.polygon({fillColor: '#00b0ff',strokeColor: '#80d8ff'//同Polygon的Option设置});break;}case 'circle': {mouseTool.circle({fillColor: '#00b0ff',strokeColor: '#80d8ff'//同Circle的Option设置});break;}}}draw(type)// 清除document.getElementById('clear').onclick = function () {window.map.remove(overlays)overlays = [];}},

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

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

相关文章

微信小程序中 vant weapp 使用外部的icon作为图标的步骤

微信小程序中 vant weapp 使用外部的icon作为图标的步骤 1. 在项目中创建静态资源文件夹2. 前往iconfont图标官网&#xff0c;添加图标并拷贝在线链接3. 下载iconfont代码&#xff0c;解压之后拷贝到小程序的目录中4. 修改iconfont.wxss 将本地链接替换为在线链接5. 在项目的ap…

巨额亏损,股价遭受重创,Polestar极星汽车已陷入困境

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 8月31日&#xff0c;由吉利汽车&#xff08;00175&#xff09;和沃尔沃汽车合资创建的瑞典电动汽车公司Polestar极星汽车&#xff08;PSNY&#xff09;公布了2023年第二季度财报。 这家电动汽车公司在去年通过SPAC上市后&am…

Flink+Flink CDC版本升级的依赖问题总结

之前使用Flink1.13Flink CDC2.0同步MySQL数据&#xff0c;想测试一下最新的几个版本。但是各种依赖冲突的报错&#xff0c;经过一段时间的调试&#xff0c;终于解决&#xff0c;现在总结一下。 1、flink1.15前后jar包名称不一样 flink-streaming-java、flink-clients、flink-…

电子产品CE认证申请,CE-RED认证

CE认证&#xff0c;即只限于产品不危及人类、动物和货品的安全方面的基本安全要求&#xff0c;而不是一般质量要求&#xff0c;协调指令只规定主要要求&#xff0c;一般指令要求是标准的任务。 构成欧洲指令核心的"主要要求"&#xff0c;在欧共体1985年5月7日的&…

k8s集群中ETCD备份和恢复

文章目录 [toc]一、etcd 概述二、安装etcdctl工具三、kubeadm部署方式部署1&#xff09;备份2&#xff09;恢复四、定时备份 五、二进制部署备份1&#xff09;备份2&#xff09;恢复1、停止apiserver和etcd2、etcd_1恢复3、etcd_2恢复4、etcd_3恢复5、启动etcd和apiserver6、检…

使用正则表达式总结

多行匹配 使用Pattern.DOTALL | Pattern.MULTILINE参数 Pattern.CASE_INSENSITIVE&#xff1a;不区分大小写 public static void main(String[] args) {String teststr "AA aa AASSF \n\r */ DDET AA";String regStr "(?AA)\\w\\b";extracted(testst…

基于Java+SpringBoot+Vue前后端分离交通管理在线服务系统设计和实现

博主介绍&#xff1a;✌全网粉丝30W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末获取源码联系&#x1f345; &#x1f447;&#x1f3fb; 精彩专…

基于SSM的汽车客运站管理系统

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…

电工什么是电动势

什么是电动势&#xff1f;及电源电动势计算公式与方向确定 前面我们讲到在基本电路中的电流和电压的基础知识&#xff0c;而本文要讲的电动势和电压是一个很类似的概念。那么什么是电动势&#xff1f;电源电动势的计算公式是什么&#xff1f;它的方向如何确定及与电压有什么区…

FPGA时序分析与约束(5)——时序路径

一、前言 在之前的文章中我们分别介绍了组合电路的时序&#xff0c;时序电路的时序和时钟的时序问题&#xff0c;我们也对于时序分析&#xff0c;时序约束和时序收敛几个基本概念进行了区分&#xff0c;在这篇文章中&#xff0c;我们将介绍时序约束相关的最后一部分基本概念&am…

用半天时间从零开始复习前端之html

目录 前言 科班生的标配&#xff1a;半天听完一门标记型语言 准备工作 webstorm2022 webstrom 第一个html页面 body h系列标签 行标签和块标签 列表标签 表格标签&#xff08;另起一篇&#xff09; 万能的input 1.快速生成多个标签 2.同时选中多个 前言 科班生的标…

SpringMVC_异常统一处理

3.全局统一异常处理 3.1目前存在问题 模拟后台出现服务器异常 GetMappingpublic ResultResp list(RequestParam(required false) String name){System.out.println(1/0);List<Item> ret service.lists(name);return ResultResp.success(retnull?Code.PAGE_FAIL:Code.…

如何使用HTTP代理爬虫,防止对网站造成负面影响

在当今大数据时代&#xff0c;爬虫技术已经成为了获取数据的重要手段之一。但是&#xff0c;由于爬虫程序的高频访问容易对目标网站造成负面影响&#xff0c;如增加服务器负载、影响网站性能等&#xff0c;因此&#xff0c;如何使用HTTP代理爬虫防止对网站造成负面影响成为了一…

无涯教程-JavaScript - IMPRODUCT函数

描述 IMPRODUCT函数以x yi或x yj文本格式返回1到255个复数的乘积。两个复数的乘积为- $$(A BI)(C DI)(AC-BD)(A B)1 $$ 语法 IMPRODUCT (inumber1, [inumber2] ...)争论 Argument描述Required/OptionalInumber11 to 255 complex numbers to multiply.Required[inumbe…

微信小程序的开发---tabBar的介绍

目录 一、tabBar的介绍 二、tabBar的6个组成部分 三、tabBar节点的配置项 四、tab项的配置选项 五、tabBar的使用 一、tabBar的介绍 tabBar是移动端应用常见的页面效果&#xff0c;用于实现多页面的快速切换。小程序中通常将其分为&#xff1a; &#xff08;1&#xff09;…

【数据结构-栈】栈基础

&#x1f49d;&#x1f49d;&#x1f49d;欢迎来到我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:kuan 的首页,持续学…

小米将推出中端手机,高通骁龙7系列再添一员,能否吸引消费者?

小米将于近日推出一款新的中端智能手机&#xff0c;该手机将搭载全新的处理器——骁龙SM7550。这个代号为“Crow”的处理器引起了广泛的关注和猜想&#xff0c;因为它是高通骁龙7系列的一员&#xff0c;但性能可能低于7 Gen 2&#xff0c;那么它的亮点和面向用户群体是什么呢&a…

一文讲清楚redis的线程池jedis

背景 在shigen实习的时候&#xff0c;遇到了日志系统的性能优化问题&#xff0c;当时的优化点就是&#xff1a;使用redis的线程池&#xff0c;实现并发状态下的性能优化。但是找了很多的技术方案&#xff0c;发现redis的线程池配置起来比较麻烦。正巧&#xff0c;这个周末shig…

基于STM32设计的格力空调遥控器

一、格力空调协议介绍 格力空调的红外控制协议被称为格力红外通讯协议或者格力红外遥控协议。这个协议定义了一系列红外信号&#xff0c;可以用来控制格力空调的各种操作&#xff0c;例如开关、温度控制、模式选择、风速控制等等。 格力空调的红外控制协议是一种自定义协议&a…

2023高教杯数学建模1:ABC题目+初步想法

2023 ABC题目初步想法 写在最前面A题&#xff1a;定日镜场的优化设计问题1&#xff1a;建模将其抽象为数学公式问题2&#xff1a;固定部分参数&#xff0c;约束条件下的局部最优化问题可尝试方法 问题3&#xff1a;约束条件下的局部最优化问题附录&#xff1a;相关计算公式参考…