Javascript 在传单中标记多边形的最佳方法?
我在GeoJson文件中标记了6个多边形。我在每个多边形质心上使用circleMarker,然后调用.bindLabel,但是我得到了一个错误:“circleMarker.bindLabel不是一个函数”。调用传单.label.js GeoJSON的代码: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,
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不是一个函数