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

2023-12-15 01:21:07

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

这个功能比较简单,只需要使用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%的问题了吧。

文章来源:https://blog.csdn.net/wangzai888/article/details/134872760
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。