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

我在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);
});

最佳答案

您正在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>