leaflet - 如何在弹出窗口中隐藏尾部三角形

Question

image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c

我正在使用传单来渲染 mapbox map 。标记顶部有一个小三角形；我怎样才能隐藏它？

Answer 1

对于看到这篇文章的其他人，他们可能正在为工具提示三角形，甚至工具提示的背景 css 苦苦挣扎，我将我的研究放在一个地方，并找到了影响三角形和工具提示背景的各种方法。弹出窗口!

如果您有一个 POPUP 绑定(bind)到一个标记，.leaflet-popup-tip控制三角形。我在这里隐藏它:

.leaflet-popup-tip {
    background: rgba(0, 0, 0, 0) !important;
    box-shadow: none !important;
}

如果您有添加到 map 的工具提示，您可以使用这个神奇的 css 控制工具提示的三角形:

.leaflet-tooltip-top:before, 
.leaflet-tooltip-bottom:before, 
.leaflet-tooltip-left:before, 
.leaflet-tooltip-right:before {
    border: none !important;
}

更多造型:
POPUP:您还可以通过定位 .leaflet-popup-content-wrapper 来控制弹出窗口的 css。 .在这里，我完全删除了弹出窗口的背景/边框/框的所有痕迹并放大了字体:

.leaflet-popup-content-wrapper {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

TOOLTIP:您可以在创建工具提示时将类名添加到工具提示中，例如 {className: 'popup'} ，然后使用它来设置工具提示的样式:

.popup {
    background: rgba(0, 0, 0, 0) !important;
    border: none !important;
    font-size: 20px;
    box-shadow: none !important;
}

要查看如何向 map 添加工具提示和弹出窗口，以及所有这些如何协同工作，以下是一个带有注释的工作示例:
https://repl.it/@MeowMeow/NeighboringConventionalPhp

希望这对某人有帮助! :)