在传单中标记多边形的最佳方法？

Question

我在 GeoJson 文件中标记了 6 个多边形。我在每个多边形质心上使用 circleMarker，然后调用 .bindLabel，但出现此错误：“circleMarker.bindLabel 不是函数”。 Leaflet.label.js 被调用。

The map.

GeoJSON 代码：

var districts = L.geoJson(null, {
  style: function (feature) {
    return {
        weight: 1,
        opacity: 1,
        color: 'blueviolet',
        fillColor: 'plum',
        fillOpacity: 0.5
    };
  },


onEachFeature: function (feature, layer) {
    layer.on('mouseover', function () {
      this.setStyle({
        'fillColor': '#0000ff'
      });
    });
    layer.on('mouseout', function () {
      this.setStyle({
        'fillColor': 'plum'
      });
    });
    layer.on('click', function () {
    window.location = feature.properties.URL;
    });

var circleMarker = L.circleMarker(layer.getBounds().getCenter());
// e.g. using Leaflet.label plugin
circleMarker.bindLabel(feature.properties['NAME'], { noHide: true })
    .circleMarker.addTo(map);
}

});

$.getJSON("data/districts.geojson", function (data) {
  districts.addData(data);
});

Answer 1

您在 circleMarker 对象实例上调用 circleMarker 方法。那永远行不通。 L.CircleMarker 没有 circleMarker 方法。这行不通：

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true }).circleMarker.addTo(map);

这将：

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true }).addTo(map);

这也是：

circleMarker.bindLabel(feature.properties['NAME'], { noHide: true });
circleMarker.addTo(map);

但如果你想在不使用 L.CircleMarker 的情况下添加标签，你可以简单地这样做：

onEachFeature: function (feature, layer) {
    layer.bindLabel(feature.properties['NAME'], { 'noHide': true });
}

您还以错误的顺序加载脚本：

<script src="assets/leaflet-label/leaflet.label.js"></script>
<script src="assets/leaflet-0.7.2/leaflet.js"></script>

Leaflet.label 想从 Leaflet 扩展类，但它不能，因为 Leaflet 本身还没有加载。所以是的，你已经加载了 Leaflet.label，只是时间不对。您可以在控制台中看到这一点，因为 Leaflet.label 在找不到 Leaflet 时应该会抛出错误。正确方法：

<script src="assets/leaflet-0.7.2/leaflet.js"></script>
<script src="assets/leaflet-label/leaflet.label.js"></script>