小编Ale*_*lex的帖子

Leaflet.js geoJson 标签

我正在使用带有 Leaflet.js 的 geoJson 层,在此处显示国家/地区。

我正在添加以下国家/地区标签:

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

问题是,这种应用的标记阻碍了每个国家/地区的鼠标悬停,导致鼠标悬停颜色变化和可点击区域出现问题。

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

我已经尝试过使用 Leaflet.Label 扩展的代码,如下所示:

var label = new L.Label();
label.setContent(feature.properties.name);
label.setLatLng(center);
map.showLabel(label);
Run Code Online (Sandbox Code Playgroud)

或者

L.marker(center)
  .bindLabel('test', { noHide: true })
  .addTo(map);
Run Code Online (Sandbox Code Playgroud)

但是这些会导致错误;我知道这个插件的功能在 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);
Run Code Online (Sandbox Code Playgroud)

欢迎任何想法。

javascript jquery jquery-plugins geojson dc.leaflet.js

3
推荐指数
1
解决办法
5483
查看次数