为什么在使用集群时,点击事件上的传单标记不起作用?
Why leaflet marker on click event is not working when using cluster?
如 jsfiddle 所示,单个标记可以绑定到单击事件,而集群标记不能:http://jsfiddle.net/kdnxcwda/
为什么,以及如何让它发挥作用?
我的Javascript代码:
//An extract of address points from the LINZ bulk extract: http://www.linz.govt.nz/survey-titles/landonline-data/landonline-bde
//Should be this data set: http://data.linz.govt.nz/#/layer/779-nz-street-address-electoral/
var addressPoints = [[-37.793167, 175.211862,"the one"],
[-37.8210922667, 175.2209316333, "2"],
[-37.8210819833, 175.2213903167, "3"]
/* many more coordinates, see JSFiddle link */
];
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {title: title});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
$( ".leaflet-marker-pane img").on( "click", function() {
console.log("click");
});
HTML:
<div id="map"></div>`
您需要监听 clusterclick
事件,查看 documentation 关于事件:
markers.on('clusterclick', function (a) {
console.log('cluster with ' + a.layer.getAllChildMarkers().length + ' markers in it');
});
JSFiddle:http://jsfiddle.net/q0Lkuzks/
如 jsfiddle 所示,单个标记可以绑定到单击事件,而集群标记不能:http://jsfiddle.net/kdnxcwda/
为什么,以及如何让它发挥作用?
我的Javascript代码:
//An extract of address points from the LINZ bulk extract: http://www.linz.govt.nz/survey-titles/landonline-data/landonline-bde
//Should be this data set: http://data.linz.govt.nz/#/layer/779-nz-street-address-electoral/
var addressPoints = [[-37.793167, 175.211862,"the one"],
[-37.8210922667, 175.2209316333, "2"],
[-37.8210819833, 175.2213903167, "3"]
/* many more coordinates, see JSFiddle link */
];
var tiles = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
}),
latlng = L.latLng(-37.82, 175.24);
var map = L.map('map', {center: latlng, zoom: 13, layers: [tiles]});
var markers = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
var a = addressPoints[i];
var title = a[2];
var marker = L.marker(new L.LatLng(a[0], a[1]), {title: title});
marker.bindPopup(title);
markers.addLayer(marker);
}
map.addLayer(markers);
$( ".leaflet-marker-pane img").on( "click", function() {
console.log("click");
});
HTML:
<div id="map"></div>`
您需要监听 clusterclick
事件,查看 documentation 关于事件:
markers.on('clusterclick', function (a) {
console.log('cluster with ' + a.layer.getAllChildMarkers().length + ' markers in it');
});
JSFiddle:http://jsfiddle.net/q0Lkuzks/