vue-baidu-map实现在地图上选择范围并解决相关问题

vue-baidu-map实现在地图上选择范围并解决相关问题

  • 实现地图上选择不规则范围
  • 实现功能遇到的问题
    • 1、覆盖物多边形怎么才能盖住覆盖物点
    • 2、遇到其他问题

实现地图上选择不规则范围

这个功能比较简单,只需要使用vue-baidu-map插件的覆盖物多边形功能就行了。

在这里插入图片描述
直接看文档,按照文档来就可以实现。

实现功能遇到的问题

1、覆盖物多边形怎么才能盖住覆盖物点

需求时需要添加一个中心,然后用户可以根据这个中心点,用不规则图形画出想要的范围。
但是里面有个很坑的问题,插件里面覆盖物点的层级总是比覆盖物多边形的层级高。
如下图示:

在这里插入图片描述
我觉得是插件写死了每一个功能模块所在的层级,这里官方文档也没有给出解决方案。
于是这里就不能用常规配置手段解决问题。
通过工具我们知道多边形覆盖物里面的点有指定的class=“BMap_vectex BMap_vectex_node”
解决思路是当多边形点画出来以后,我们找到对应点—>然后找到对应点的父级–>设置父级的层级超过覆盖物点的层

/*这里是在	bm-polygon组件参数 :path="polygonPath"改变的时候,调用我这里用setTimeout是省事情(覆盖物多边形绘制完成才能获取到对应的元素),实际开发时可以监听bm-polygon覆盖物的属性发生变化时触发
*/
setTimeout(()=>{let BMapVectex = document.getElementsByClassName('BMap_vectex');if(BMapVectex.length > 0) {BMapVectex[0].parentNode.style.zIndex = 9999}
}, 100)

2、遇到其他问题

我没遇到其他问题,如果遇到其他问题,文档没有的,参考问题1的思路,应该能解决80%的问题了吧。

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

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

相关文章

dToF直方图之美_激光雷达多目标检测

直方图提供了一种简单有效的方法来分析信号分布并识别与目标存在相对应的峰值,并且能够可视化大量数据,让测距数形结合。在车载激光雷达中,对于多目标检测,多峰算法统计等,有着区别于摄像头以及其他雷达方案的天然优势。 如下图,当中有着清晰可见的三个峰值,我们可以非…

Java智慧校园-中小学校园管理系统源码

智慧校园系统是通过信息化手段,实现对校园内各类资源的有效集成 整合和优化,实现资源的有效配置和充分利用,将校务管理过程的优化协调。为校园提供数字化教学、数字化学习、数字化科研和数字化管理。 致力于为家长和教师提供一个全方位、多层…

消费增值:一种改变消费观念的新模式

据统计,全球电子商务市场在过去的五年内以每年20%的速度增长,预计到2025年将达到5.5万亿美元。然而,在这个庞大的市场中,消费者在购物后往往只获得了商品或服务本身,而没有获得更多的附加价值。为了改变这种消费观念&a…

内网穿透的应用-如何结合Cpolar内网穿透工具实现在IDEA中远程访问家里或者公司的数据库

文章目录 1. 本地连接测试2. Windows安装Cpolar3. 配置Mysql公网地址4. IDEA远程连接Mysql小结 5. 固定连接公网地址6. 固定地址连接测试 IDEA作为Java开发最主力的工具,在开发过程中需要经常用到数据库,如Mysql数据库,但是在IDEA中只能连接本…

SpringMVC项目出现404

目录 问题讲解: 解决方案: 1、处理器映射器和处理器适配器以及视图解析器没有配置好 2、Controller的包扫描没有加或者包扫描的配置是错误的 3、当然也有说jar包没有 4、请求地址是错误的 5、还有一种解决办法说web.xml配置DispatcherServlet的时…

Android Studio的笔记--String和byte[]

String和byte[]的相互转换,字节数组转换 String转换byte[]文本16进制字节数组 byte[]转换String文本16进制 其它 String转换byte[] 文本 将字符串(String)转换为字节(byte)的方法。默认使用的是UTF-8编码 StandardCh…

二叉树题目:在受污染的二叉树中查找元素

文章目录 题目标题和出处难度题目描述要求示例数据范围 前言解法一思路和算法代码复杂度分析 解法二思路和算法代码复杂度分析 题目 标题和出处 标题:在受污染的二叉树中查找元素 出处:1261. 在受污染的二叉树中查找元素 难度 5 级 题目描述 要求…

脱碱软化树脂Tulsimer CXO-5 MP 高盐水除钙镁树脂

一、产品介绍 Tulsimer CXO-5 MP 是一款大孔弱酸性丙烯酸系阳离子交换树脂,能除去水中的碱度和硬度,特别是除去水中的碳酸氢盐、碳酸盐及其它碱性盐类,适合运用于纯水 ,脱碱软化及选择性的去除重金属。适合在宽广的 pH 及温度范围情况下操作…

深入理解软件测试中的Web请求流程!

在软件开发的过程中,软件测试是不可或缺的一环,它有助于确保软件系统的稳定性、可靠性和安全性。而在众多测试中,Web请求流程的测试显得尤为重要,因为几乎所有的现代应用都离不开网络交互。接下来我们将深入探讨软件测试中完整的W…

【带头学C++】----- 九、类和对象 ---- 9.10 C++设计模式之单例模式设计

❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️麻烦您点个关注,不迷路❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️❤️ 目 录 9.10 C设计模式之单例模式设计 举例说明: 9.10 C设计模式之单例模式设计 看过我之前的文章的,简单讲解过C/Q…

<Linux> 进程

目录 一、进程概念 什么是task_struck task_struct包含内容 二、查看进程 1. ps 查看: 2. /proc/目录查看 3. top 指令 三、系统调用获取进程标示符 获取自己、父进程ID 四、创建进程 1. 初识fork 2. 理解fork创建子进程 3. fork后的数据修改 4.for…

直流电和交流电

直流电(Direct Current,简称DC)和交流电(Alternating Current,简称AC)是电流的两种基本形式。 1. 直流电 直流电是指电流方向始终保持不变的电流。在直流电中,电子只能沿着一个方向移动。直流电…

网络攻击(二)--情报搜集阶段

4.1. 概述 在情报收集阶段,你需要采用各种可能的方法来收集将要攻击的客户组织的所有信息,包括使用社交网络、Google Hacking技术、目标系统踩点等等。 而作为渗透测试者,你最为重要的一项技能就是对目标系统的探查能力,包括获知…

windows MYSQL下载和自定路径安装,以及解决中文乱码问题。

文章讲的很详细,请耐心往下看。 一、mysql下载 下载网址:https://www.mysql.com/downloads/ 表示不登录,直接下载。 以上就把安装包下载完了。下载是8.0.35版本。 二、接下来看怎么安装 1.双击安装包,进行安装。 注意&#x…

15:00面试,15:06就出来了,问的问题太变态了。。

刚从小厂出来,没想到在另一家公司我又寄了。 在这家公司上班,每天都要加班,但看在钱给的比较多的份上,也就不太计较了。但万万没想到5月一纸通知,所有人不准加班了,不仅加班费没有了,薪资还要降…

白羽肉鸡养殖市场分析:2023年中国市场处于盈利状态

白羽肉鸡是我国养殖的主要快大型肉鸡品种,由于羽毛为白色,相较于本土黄羽肉鸡的羽毛颜色,基层常称其为白羽肉鸡。 隐性白羽鸡属于快大白羽肉鸡。是从白洛克(或白温多得)中选育而成。原产于法国。隐性白羽鸡在优质鸡配套上的应用对我国优质鸡产…

【高数:3 无穷小与无穷大】

【高数:3 无穷小与无穷大】 1 无穷小与无穷大2 极限运算法则3 极限存在原则4 趋于无穷小的比较 参考书籍:毕文斌, 毛悦悦. Python漫游数学王国[M]. 北京:清华大学出版社,2022. 1 无穷小与无穷大 无穷大在sympy中用两个字母o表示无…

k8s volumes and data

Overview 传统上,容器引擎(Container Engine)不提供比容器寿命更长的存储。由于容器被认为是瞬态(transient)的,这可能会导致数据丢失或复杂的外部存储选项。Kubernetes卷共享 Pod 生命周期,而不是其中的容器。如果容器终止,数据…

C# 数据的保存和提取(.TXT格式)

红色部分的才是最终版 一、将页面内容保存到文件中 第一步 创建Visual的Windows窗体应用,使用的是 第二步 创建几个Label控件、TextBox控件、以及Button按钮,而TextBox控件放入Panel中 第三步 先对写法进行了解,了解保存的语句 StreamWriter sw= new StreamWriter(TXT…

【android开发-17】android中SQLite数据库CRUD详细介绍

1,SQLite数据库读写的操作步骤 在Android中,对SQLite数据库的操作主要包括以下步骤: 1,创建数据库:首先,您需要创建一个SQLite数据库。这可以通过在Android项目中创建一个新的类来实现,该类继…