javascript - 更改传单标签的位置

Question

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

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

http://jsfiddle.net/NYGvibeke/frUf4/3/

<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]