Question

我在Leaflet.js中使用geoJson图层，显示国家/地区here。

我添加了以下国家/地区标签：

L.marker(layer.getBounds().getCenter(), {
     icon: L.divIcon({
         className: 'countryLabel',
         html: feature.properties.name,
         iconSize: [0, 0]
     })
}).addTo(map);

问题是，这适用的标记会阻碍鼠标悬停在每个国家/地区的区域，从而导致鼠标悬停颜色变化和可点击区域出现问题。

在传单1.0.3中是否有更好的解决方案来提供不会阻碍国家/地区可点击区域的标签？

我尝试过使用Leaflet.Label扩展程序的代码：

var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);

或

L.marker(center)
  .bindLabel('test', { noHide: true })
  .addTo(map);

但这些会导致错误;我知道这个插件的功能在v1之后被整合到Leaflet.js中。

这确实有效，但我宁愿使用简单的标签代替工具提示：

var marker = new L.marker(center, { opacity: 0.00 }); //opacity may be set to zero
marker.bindTooltip(feature.properties.name, { permanent: true, className: "my-label", offset: [0, 0] });
marker.addTo(map);

欢迎任何想法。

Answer 1

我不明白你为什么要用标记标记来完成它。

您可以将工具提示直接绑定到要素。在您的函数onEachFeature中，您可以执行以下操作：

，而不是var label...

layer.bindTooltip(
    feature.properties.name,
    {
        permanent:true,
        direction:'center',
        className: 'countryLabel'
    }
);

用这个css：

.countryLabel{
  background: rgba(255, 255, 255, 0);
  border:0;
  border-radius:0px;
  box-shadow: 0 0px 0px;
}

这是fiddle。

修改

好的我明白了，如果需要，你想用标记手工设置位置。这是一个有效的解决方案：

您为所有异常国家/地区定义了一个带有latLng的哈希表，那些功能中心不是您想要的中心：

var exceptions = { 'France': [45.87471, 2.65], 'Spain': [40.39676, -4.04397] }

要显示标签，请将一个不可见标记放在正确位置，并将工具提示绑定到该标记：

var label = L.marker( exceptions[feature.properties.name] || layer.getBounds().getCenter(), { icon: L.divIcon({ html: '', iconSize: [0, 0] }) } ).addTo(map); label.bindTooltip( feature.properties.name, { permanent:true, direction:'center', className: 'countryLabel' } );

这是另一个fiddle。

Leaflet.js geoJson标签

1 个答案: