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.mzph.cn/news/207090.shtml

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

相关文章

Win10专业版找不到安全中心选项的解决方法

在Win10电脑中,安全中心功能起到很大的作用。但是,有用户在Win10专业版电脑上找不到安全中心选项,从而影响到自己的正常使用。下面小编分享解决Win10专业版系统没有安全中心的简单方法,解决后在Win10专业版就能成功找到安全中心了…

哈希表及其基础(java详解)

目录 一、哈希表基础 二、哈希函数的设计 哈希函数的设计原则 三、java中的hashCode 基本数据类型的hashCode使用 自定义类型的hashCode使用 需要注意 四、哈希冲突的处理 链地址法Seperate Chaining 五、实现属于我们自己的哈希表 六、哈希表的动态空间处理和复杂…

通过项目管理软件监管新员工入职流程的方法与策略

项目管理软件是什么?项目管理软件都能做什么?是不是只有项目团队需要啊?NO!项目管理软件乍听其名不免让人觉得这不过是个项目领域的专用工具。 那什么是项目呢?项目是为创造独特的产品、服务或成果而进行的体系化的工…

物联网+AI智慧工地云平台源码(SaaS模式)

智慧工地云平台充分运用数字化技术,聚焦施工现场岗位一线,依托物联网、互联网、AI等技术,围绕施工现场管理的人、机、料、法、环五大维度,以及施工过程管理的进度、质量、安全三大体系为基础应用,实现全面高效的工程管…

stm32中滴答定时器与普通定时器的区别

1、两者在单片机中的位置不一样 滴答定时器在内核上,普通定时器在外设上。 由于位置不同,滴答定时器的程序可以移植到所有相同内核的芯片上,但普通定时器的程序却不可以。 2、两者的中断优先级不一样 滴答定时器优先级高,普通定…

CTF刷题记录

刷题 我的md5脏了KFC疯狂星期四坤坤的csgo邀请simplePHPcurl 我的md5脏了 g0at无意间发现了被打乱的flag:I{i?8Sms??Cd_1?T51??F_1?} 但是好像缺了不少东西,flag的md5值已经通过py交易得到了:88875458bdd87af5dd2e3c750e534741 flag…

关于微信/支付宝等平台验签/签名sign生成算法

引言 我们在日常工作中经常会遇到对接微信平台、支付宝平台、或者自己对外开放一个api服务,那么这里经常会出现一个名字:sgin(签名)。 举个栗子 这是微信支付统一下单接口文档,最简单的理解就是,服务端为…

Unirest-Java:Java发起GET、POST、PUT、DELETE、文件上传,文件下载工具类介绍

一、简介 Unirest-Java是一个轻量级的HTTP客户端库,用于在Java应用程序中发送HTTP请求。 它提供了简单易用的API,可以方便地处理GET、POST、PUT、DELETE等HTTP方法。 Unirest-Java支持异步和同步请求,可以轻松地与JSON、XML等数据格式进行…

最优化方法复习——线性规划之对偶问题

一、线性规划对偶问题定义 原问题: 对偶问题: (1)若一个模型为目标求 “极大”,约束为“小于等于” 的不等式,则它的对偶模型为目标求“极小”,约束是“大于等于”的不等式。即“Max&#xff0…

2024年甘肃省职业院校技能大赛信息安全管理与评估三阶段理论样题一

2024年甘肃省职业院校技能大赛高职学生组电子与信息大类信息安全管理与评估赛项样题一 第六部分 理论技能与职业素养(100 分) 【注意事项】 1.该部分答题时长包含在第三阶段竞赛时长内,请在临近竞赛结束前提交。 2.参赛团队可根据自身情况…

数据库系统概论复习资料

数据库系统概论考试需知 一、分值分布 1、判断题(10分) 1分一个 2、填空题(20分) 2分一个 3、选择题(20分) 2分一个 4、分析题(30分) 第一题10分,第二题…

如何设置echart图表在vue页面屏幕比例缩放自适应问题

问题&#xff1a;页面的echart图表在浏览器缩放屏幕比例时无法随着屏幕的比例自动改变大小 解决方式&#xff1a; 可以通过监听窗口的 resize 事件&#xff0c;并在事件回调函数中重新调整图表的大小。 <template><div ref"chartContainer" style"w…

Enterprise Architect 12版本使用教程

Enterprise Architect 12版本使用教程 1.下载安装Enterprise Architect 122.Enterprise Architect原始DDL模板配置及存在的问题1.DDL Column Definition原始模板&#xff08;没有default值&#xff1a;可忽略&#xff09;2.DDL Data Type原始模板&#xff08;timestamp等时间字…

Apollo新版本Beta自动驾驶技术沙龙参会体验有感—百度自动驾驶开源框架

在繁忙的都市生活中&#xff0c;我们时常对未来的科技发展充满了好奇和期待。而近日&#xff0c;我有幸参加了一场引领科技潮流的线下技术沙龙&#xff0c;主题便是探索自动驾驶的魅力——一个让我们身临其境感受创新、了解技术巨擘的机会。 在12月2日我有幸参加了Apollo新版本…

智能优化算法应用:基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码

智能优化算法应用&#xff1a;基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码 文章目录 智能优化算法应用&#xff1a;基于沙猫群算法无线传感器网络(WSN)覆盖优化 - 附代码1.无线传感网络节点模型2.覆盖数学模型及分析3.沙猫群算法4.实验参数设定5.算法结果6.参考文献7.…

kotlin协程反编译java学习原理

前情提要 GlobalScope.launch(Dispatchers.Main) { // 默认是Default异步 // 1.从当前协程体作用域Dispatchers.Main 协程依附的线程 到 挂起点 挂起函数 到 执行 请求耗时操作 而 切换到 IO异步线程 // 2.IO异步线程执行完成后&#xff0c;开始恢复&#xff0c;当前作…

modbus转profinet网关解决plc插槽号不够用的情况

PLC作为常用的控制设备之一&#xff0c;其插槽号有时会限制外部设备的连接数量。然而&#xff0c;通过使用modbus转profinet网关&#xff0c;可以解决这一问题。这种设备能够将modbus协议转换为profinet协议&#xff0c;实现PLC与更多外部设备的连接。 modbus转profinet网关还具…

游戏盾的防御原理以及为什么程序类型更适合接入游戏盾。

游戏盾是一种专门用于游戏服务器的安全防护服务&#xff0c;旨在抵御各种网络攻击。它的原理主要包括以下几个方面&#xff1a; 流量清洗和过滤&#xff1a;游戏盾会对进入游戏服务器的流量进行实时监测、分析和过滤。它通过识别恶意流量和攻击流量&#xff0c;过滤掉其中的攻击…

浏览器渲染页面的过程以及原理

什么是浏览器渲染 简单来说&#xff0c;就是将HTML字符串 —> 像素信息 渲染时间点 浏览器什么时候开始渲染&#xff1f; 网络线程发送请求&#xff0c;取回HTML封装为渲染任务并将其传递给渲染主线程的消息队列。 问题&#xff1a;只取回HTML吗&#xff1f;那CSS和JS呢&am…

面试经典150题(1-2)

leetcode 150道题 计划花两个月时候刷完&#xff0c;今天完成了两道(1-2)150&#xff1a; &#xff08;88. 合并两个有序数组&#xff09;题目描述&#xff1a; 给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 n…