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

时间:2015-01-06 04:59:55

标签: javascript leaflet geojson

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

1 个答案:

答案 0 :(得分: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>