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

Javascript 在传单中标记多边形的最佳方法?,javascript,leaflet,geojson,Javascript,Leaflet,Geojson,我在GeoJson文件中标记了6个多边形。我在每个多边形质心上使用circleMarker,然后调用.bindLabel,但是我得到了一个错误:“circleMarker.bindLabel不是一个函数”。调用传单.label.js GeoJSON的代码: var districts = L.geoJson(null, { style: function (feature) { return { weight: 1, opacity: 1,

我在GeoJson文件中标记了6个多边形。我在每个多边形质心上使用circleMarker,然后调用.bindLabel,但是我得到了一个错误:“circleMarker.bindLabel不是一个函数”。调用传单.label.js

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>

label想从传单扩展类,但不能,因为传单本身尚未加载。所以是的,你已经加载了传单。标签,只是时间不对。您可以在控制台中看到这一点,因为传单.label在找不到传单时会抛出错误。正确的方法是:

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


我得到“layer.bindLabel不是一个函数”,尽管正在阅读传单-label.js。我的错,对不起,我忽略了你犯的另一个错误,我会更新我的答案。现在可以了。感谢您的明确指示和解释@iH8:嗨。。我也在做同样的事。我还将js文件按正确的顺序排列。但它仍然给出了错误:layer.bindLabel不是一个函数