百度地图API的图层zIndex问题

使用百度地图API整多覆盖物渲染的时候，老是会出现”A覆盖物遮住了B覆盖物导致无法触发A覆盖物的点击事件”这样的问题。高德地图里面几乎都有setZIndex这样的方法供开发者设置覆盖物图层，百度地图API里面只有TileLayerOptions、CanvasLayerOptions、Label和Marker有。那么其他的覆盖物要怎么设置层级呢？
答案是先绘制的在下面，后绘制的在上面

this.map.addOverlay(circle);
this.map.addOverlay(marker);
this.map.addOverlay(polyline);

像这样的一段代码，代表先画circle，再画marker，最后画polyline。这样的话circle就在最底层，marker在circle的上面，polyline在marker的上面。如果marker正好和polyline重合，且marker的宽度没有polyline的宽度大，那么这个时候点击marker的位置是触发不了marker的监听事件的。
同理，如果是这样一段代码

this.map.addOverlay(marker);
this.map.addOverlay(polyline);
this.map.addOverlay(circle);

代表最后画circle，那么circle就在所有覆盖物的上面。如果正好polyline或者marker处于circle覆盖区域，那么polyline和marker这俩覆盖物都无法触发它们自己的监听。

值得一提的是，在百度地图API里，map似乎永远是最上层，我们通过dom似乎也能看到这个结果。这就造成了触发任意覆盖物的监听如click时也必定会触发map的监听。我们可以通过map监听回调函数入参中的overlay属性来判断是否该事件是否有其他覆盖物参与。比如click监听的情况下，如果map的监听回调参数中overlay有值，代表该次点击点到了其他的覆盖物上。我们可以通过return直接结束掉本次监听来避免多余逻辑的产生。

百度地图API的图层zIndex问题相关推荐

Echarts结合百度地图API
Echarts结合百度地图API 下面的代码运用到了Echarts 和百度地图API,地图的样式自定义的.(效果图在最下边) 运用到了百度API中的自定义控件,监听事件addEventListener ...
利用百度地图api，自定义起始点进行驾车路线的搜索，并可以根据不同驾车策略给出驾驶指导
利用百度地图api,通过在输入框(带自动填充)输入起始点,然后根据用户选择的不同驾车策略来进行驾车路线搜索并显示具体的路线信息.驾车策略共三种,默认路线(时间最短).最短路程.不走高速.左侧搜索栏可以 ...
用百度地图API分析打交通大数据
百度地图API, 文档不全,例子不细致. 在网上还没有太多有用的例子.比如说下面几个需求的解决方案就找不到: 1. 如何用百度地图API查询一个地点的经纬度. 2. 如何用百度地图通过一个经纬度查询商 ...
android 3.0+百度地图api地图如何移动到指定的经纬度处
由于百度地图api,2.0+和3.0+的改动比较大,api基本上被全换过了,有些同学可能2.0+的api使用的非常熟悉,但是更新到3.0+时,却会遇到一些小麻烦(由于api变了,你就需要重新学习它的a ...
百度地图API开发指南
百度地图API开发指南本文为百度地图API官方版本的开发指南,供各位51CTO的网友进行参考. 简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮 ...
【百度地图API】如何制作一张魔兽地图！！——CS地图也可以，哈哈哈
[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈原文:[百度地图API]如何制作一张魔兽地图!!--CS地图也可以,哈哈哈摘要: 你玩魔兽不?你知道如何做一张魔兽地图不?! 快 ...
基于百度地图API的微信周边搜索
这是百度LBS与微信结合的一个例子~~,已经加到功能描述:点击微信的[+]后发送[位置]给微信公众号,会返回周边信息,也可以发送[附近xxx],如[附近公交],或者自己标注百度地图,标注您的连锁点或 ...
网页百度地图api，支持位置偏移
网页百度地图api,支持位置偏移需加载 jq <style type="text/css"> #allmap {width:100%; height:100%; bo ...
android 百度地图 itemizedoverlay,[008] 百度地图API之ItemizedOverlay的使用(Android) .
本篇文章主要介绍如何在百度地图上添加Overlay(即图层或覆盖物). Overlay简介 Overlay通常被译为"图层"或"覆盖物".那么对于地图而言,什么 ...

百度地图API的图层zIndex问题

百度地图API的图层zIndex问题相关推荐

最新文章

热门文章