gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-29 10:03:40 25 4
gpt4 key购买 nike

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

背景

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

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

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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com