vue2+高德地图加遮罩,一些marker显示在遮罩上，一些在遮罩下

// 遮罩的z-index是300,路线是301，marker是302
highLightPoint.initialIndex = highLightPoint.getzIndex();
highLightPoint.setzIndex(302);

项目需求：高德地图上加一个遮罩，画一堆marker，一些marker在遮罩上,一些marker在遮罩下，效果如下图

 通过强制修改css样式实现

遮罩放的位置,如上图，找到元素添加遮罩层

const amapLayerDom = document.getElementsByClassName("amap-layers")[0];
const _overlay = document.createElement("div");
_overlay.id = "customResuceOverlay";
_overlay.className = "page-overlay";
amapLayerDom.appendChild(_overlay);

然后找到渲染marker的框，因为所有marker的外面那层容器设置了z-index的值，所以里面的所有的marker的z-index为多少都不会高于外面设置的z-index，所以将外层容器的z-index设置为auto

const amapMarkersDom = document.getElementsByClassName("amap-markers")[0];
amapMarkersDom.classList.add("z-index-auto");

找到需要浮在遮罩上方的marker，设置他的index，这里使用高德自带的setzIndex方法

// 遮罩的z-index是300,路线是301，marker是302
highLightPoint.initialIndex = highLightPoint.getzIndex(); // 设置之前的z-index
highLightPoint.setzIndex(302);

设置了之后该marker的z-index就会浮在遮罩上方了

注意：该方法有个bug，当设置了marker的z-index之后,关闭弹框,再设置marker的z-index为原来的z-index,而html上该marker对应的z-index没有变回去，因为我的项目是定时刷新的,所以每次刷新的时候之前设置的z-index会在刷新重新绘制的时候变回原来的z-index去,如果不刷新的话，建议是用一个变量存当前的z-index，下次开弹框的时候弹框的,marker的zindex都加1

另外：

画的路线在遮罩之上也很简单，找到画线的canvas 元素，设置他的z-index大于遮罩就好了

                  const _canvas = document.getElementsByClassName(
                    "amap-layer amap-vectors"
                  )[0];
                  if (_canvas) {
                    _canvas.classList.add("z-index-301");
                  }