扫描标记工具提示居中

Question

扫描标记工具提示居中

javascriptcssleafletmarkers

7

我希望把工具提示显示在标记内部的中心位置。

背景

我想为每个标记（从第一个到最后一个）显示一个计数，我发现可以使用工具提示来实现这一点（还有更好的建议吗？）

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

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

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

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

所以我的问题是：

是否有比工具提示更好的解决方案？
如何在标记中居中显示计数？

示例

当前：

想要的：

(在这里，我会使背景透明，以便只能看到文本。)

- 0x45

2个回答

2

有比工具提示更好的解决方案吗？

不一定是“更好”的（这取决于您的确切要求），但更简单的解决方案是使用一个带有一些 HTML 文本的标记图标。

许多 Leaflet 插件可以提供这样的功能，例如 Leaflet.extra-markers：

var map = L.map('map').setView([48.86, 2.35], 11);

var redMarker = L.ExtraMarkers.icon({
  number: '42',
  icon: 'fa-number',
  markerColor: 'red',
  shape: 'square',
  prefix: 'fa'
});

L.marker([48.86, 2.35], {
  icon: redMarker
}).addTo(map);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.extramarkers assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet-extra-markers@1.0.6/src/assets/css/leaflet.extra-markers.css" />
<script src="https://unpkg.com/leaflet-extra-markers@1.0.6/src/assets/js/leaflet.extra-markers.js"></script>

<div id="map" style="height: 200px"></div>

- ghybs

谢谢你的想法，但我想保持简单，不注入任何插件！ - 0x45

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- 0x45 · Accepted Answer

我发现你可以添加 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;
}

结果

这是一个图片链接，无法提供更多信息。