Question

我想在我的传单标记中添加标签，然后将它们放置在标记图标上方并水平居中。

使用Leaflet.label插件中的labelAnchor选项，我可以手动调整每个标签，以便得到我想要的，现在我已经为我的标签添加了固定宽度，以便我知道文本将居中。但必须有更好的方法来实现这一目标吗？

<style type="text/css">

  .labeltext { width: 120px; text-align: center; border:none; }

</style>

<script type="text/javascript">

    var myIcon = L.icon({
        iconUrl: 'http://icons.iconarchive.com/icons/visualpharm/icons8-metro-       style/512/Maps-and-Geolocation-Marker-icon.png',
        iconSize:     [18, 30], 
        iconAnchor:   [10, 30], 
        labelAnchor: [-80, -40]
    });

    var layer = new L.StamenTileLayer("toner-lite", {maxZoom: 10});
    var map = new L.Map("map", {
        center: new L.LatLng(30, 100),
        zoom: 4,
        maxZoom: 12,
        minZoom: 2
    });

    map.addLayer(layer);

    var marker1 = L.marker([25, 100], {icon: myIcon}).bindLabel('This is a label text', { noHide: true, className: 'labeltext'}).addTo(map);

</script>

Answer 1

更改

.labeltext { width: 120px}

到

.labeltext { width: auto}

auto值将动态调整标签的宽度。

<强>更新

实际上，这只是其中的一部分。这是jsfiddle中的其余部分。基本上，您需要根据字符数动态分配位置。它需要一点点校准（取决于字体字体/大小），但这是我为labelAnchor提出的：

[-label[0].length*2.5-20, -40]

改变传单标签的位置

1 个答案: