小编Mik*_*ike的帖子

背景:我有一个桌面浏览器应用程序,它使用mapquest和传单js插件.我使用divIcon类作为标记,这允许我使用自定义HTML和样式标记.每个divIcon标记还包含一个隐藏的div,当标记悬停在其上时显示(使用:悬停类).我没有使用内置到传单中的默认标记或默认弹出窗口,因为自定义html可以更好地控制样式.

问题:当弹出窗口显示时,地图上的任何其他标记都显示在弹出窗口的顶部,而不是在下面.我已经尝试将弹出div的z-index设置为一个非常高的数字,但它没有帮助.

什么是预期:当您将鼠标悬停在图标上时,标记应位于弹出窗口后面,而不是在前面.

这不是一个重复的问题:这个问题是不一样的这一个.这个问题是关于让默认的传单弹出窗口保持在地图z-index上下文之外的自定义div的顶部.这个问题是关于自定义鼠标悬停弹出窗口(不是默认弹出窗口)保持在其他标记之上.另外,我的解决方案完全不同于公认的javascript"hack"作为解决方法.

问题的工作示例:https://jsfiddle.net/mrrost/py2bqw7j/

以下是带有自定义标记/弹出窗口的divIcon代码:

var pin = L.divIcon({ 
  html: `
    <div class='marker'>
        Pin
        <div class='popup'>
        Marker info. Other markers WILL BE on top of this div.
        This is BAD and a PROBLEM.
      </div>
    </div>
  `,
});

这个最重要的css定义:

#map {
    position: fixed;
}

/* hide default leaflet pin; div.popup is put inside here */
.leaflet-marker-icon {
    border: 0; margin: 0; padding: 0;
}    

div.popup {
  display: none;
  position: absolute;
}

div.marker:hover div.popup {
  display: …