javascript - 传单标记工具提示居中

标签 javascript css leaflet markers

我想在标记的中心(内部)显示工具提示。

背景

我想显示每个标记的计数(第一个 -> 最后一个),我发现我可以用工具提示来做到这一点(任何更好的建议)

所以我的标记现在看起来像这样,

var marker = L.marker(latlng, {icon: blueIcon}).bindTooltip(feature.properties.count, 
                    {
                permanent: true, 
                direction: 'right'
            });

我找不到任何关于 centered 或类似方向的进一步文档。

工具提示提供了查看哪个是第一个和最后一个标记的功能,但这似乎不是最佳做法。

所以我的问题:

  • 有比工具提示更好的解决方案吗?
  • 如何显示以标记为中心的计数?

例子

当前: enter image description here

想要: enter image description here

(这里我会让背景不可见,所以我只能看到文字。)

最佳答案

我发现您可以添加 direction: center。 引用:http://leafletjs.com/reference-1.0.0.html#tooltip-direction

我已经用 DivIcon 解决了我的问题

var numberIcon = L.divIcon({
                    className: "number-icon-default",
                    iconSize: [25, 41],
                    iconAnchor: [10, 44],
                    popupAnchor: [3, -40],
                    html: feature.properties.count        
              });

像这样的CSS

    .number-icon-default
{
    background-image: url("#{request.contextPath}/lib/leaflet/images/marker-icon.png");
    text-align:center;
    color:Black;   
    text-shadow: 1px 1px #000000;
    font-size: large;
    font-weight: bold;
}

结果

enter image description here

关于javascript - 传单标记工具提示居中,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48784130/

相关文章:

javascript - 如何只使用js来屏蔽图片?

r - 使用 Leaflet 在数据帧或向量中绘制经纬度信息

javascript - 将 $promise 数据放入 Javascript 数组中

html - 如何右对齐文本但仍保持向左缩进?

html - 使用 CSS 内容生成更改表单字段

javascript - 动态添加类 ="current"

javascript - 使用 LEaflet 查看多个 geoJSon 文件

javascript - 创建一个变量来保存通过另一个变量加载的信息

javascript - 错误 : Invalid configuration of route '' . 必须提供以下之一 : component, redirectTo, children or loadChildren at validateNode

javascript - let 声明的变量可以声明也可以不声明