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

Question

image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c

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

Answer 1

这个三角形由css中的.leaflet-popup-tipclass控制。如果您使用的是标准 Leaflet，您应该能够通过将以下内容添加到您的 css（在 leaflet.css 加载后）来隐藏提示：

.leaflet-popup-tip {
    width: 0px;
    height: 0px;
  }

Mapbox 实际上以与标准 Leaflet 略有不同的方式创建提示，通过元素边框而不是元素内容的样式，所以如果您使用 mapbox.js，您应该能够通过添加以下（在加载 mapbox.css 之后）：

.leaflet-popup-tip {
    border: 0px;
  }

Answer 2

对于遇到这个 post 的其他人，他们可能正在努力处理工具提示三角形，甚至是工具提示的背景 css，我将我的研究放在一个地方并找到了各种影响工具提示和弹出窗口的三角形和背景的方法！

如果您将 POPUP 绑定到标记，则 .leaflet-popup-tip 控制三角形。我把它藏起来了：

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

如果你有一个 TOOLTIP 已经添加到地图，你可以用这个神奇的 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。这里我把弹窗background/border/box的痕迹全部去掉，字体放大：

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

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

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

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

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

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

how can I hide tail triangle on popup

leaflet

mapbox