Question

image http://pasteio.com/m26f642c81452a5bf67cfc5f0b0f2390c

我正在使用传单来渲染地图集地图。标记顶部有一个小三角形;我怎么能隐藏它？

Answer 1

对于遇到这篇文章的其他人来说，他们可能在工具提示三角形甚至是工具提示的背景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。在这里，我将完全删除弹出窗口的背景/边框/框的所有痕迹并放大字体：

.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;
}

要查看如何在地图上添加工具提示和弹出式窗口，以及所有这些如何一起使用，下面是一个带有注释功能的示例： https://repl.it/@MeowMeow/NeighboringConventionalPhp

希望这对某人有帮助！：）

Answer 2

此三角形由css中的.leaflet-popup-tip类控制。如果您使用的是标准Leaflet，则可以通过在css中添加以下内容来隐藏提示（加载leaflet.css后）：

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

Mapbox实际上以与标准Leaflet略有不同的方式创建提示，方法是设置元素边框而不是元素内容，因此如果您使用mapbox.js，则应该可以通过添加以下内容来实现（加载mapbox.css后）：

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

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

2 个答案: