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%的问题了吧。