Leaflet.js を使用してデモを作成しました。すべてうまくいきますが、クラスター内のマーカーが 10 未満のときにすべてのマーカーを表示したいと思います。これは Leaflet.js で可能ですか。私は現在 Leaflet.js バージョン 0.7 を使用しています。以下は私のコードです。
var tiles = L.tileLayer('http://{s}.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiY2hhdWhhbm1vaGl0IiwiYSI6IjE0YTljYTgyY2IzNDVlMmI0MTZhNzMwOGRkMzI4MGY3In0.vNQxFF8XYPTbbjm7fD72mg',{
maxZoom: 21,
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors, Points © 2012 LINZ'
}),latlng = L.latLng($scope.search.lat, $scope.search.lang);
$scope.map = L.map('map', {center: latlng, zoom: 16, layers: [tiles]});
//$scope.markers = L.markerClusterGroup({ chunkedLoading: true , disableClusteringAtZoom: 18 });
$scope.markers = L.markerClusterGroup({
chunkedLoading: true ,
disableClusteringAtZoom: 18 ,
});
var LeafIcon = L.Icon.extend({
options: {
shadowUrl: '/map-icon/marker-shadow.png',
iconSize: [45, 45], // size of the icon
shadowSize: [41, 41], // size of the shadow
}
});
var greenIcon = new LeafIcon({iconUrl: '/map-icon/mark1.png'}),
redIcon = new LeafIcon({iconUrl: '/map-icon/mark2.png'}),
orangeIcon = new LeafIcon({iconUrl: '/map-icon/mark3.png'}),
purpleIcon = new LeafIcon({iconUrl: '/map-icon/mark4.png'}),
defaultIcon = new LeafIcon({iconUrl: '/map-icon/marker-icon.png'});
//$http.post('/api/web/data.json', { 'data': $scope.search })
$http.get('/api/web/data.json?lat='+$scope.search.lat+'&lang='+$scope.search.lang+'&radius='+$scope.search.radius+'&from='+$scope.search.from+'&to='+$scope.search.to+'&type='+$scope.search.type+'&arrest='+$scope.search.arrest ,
{ timeout: canceller.promise })
.success(function(res,status,config,header){
$scope.removeOldMarkers();
$scope.serverData = res ;
for (var i = 0; i < res.length; i++) {
var response = getContent(res[i]);
var image = res[i].primary_type == 'ASSAULT' ? redIcon : res[i].primary_type == 'ROBBERY' ? orangeIcon : res[i].primary_type == 'BATTERY' ? purpleIcon : res[i].primary_type == 'BATTERY' ? defaultIcon: greenIcon ;
var marker = L.marker(new L.LatLng(res[i].latitude, res[i].longitude),{icon: image});
marker.bindPopup(response);
if (marker !== null) $scope.markers.removeLayer(marker);
$scope.markers.addLayer(marker);
}
$scope.map.addLayer($scope.markers);
$scope.showLoder = false ;
}).error(function(err,status,config,header){
$scope.showLoder = false ;
$timeout(function(){
$scope.showLoder = true ;
},500);
console.log("Error comes in this section", err,status);
});
}
以下は私のherokuのデモリンクです。 http://stagingleaflet.herokuapp.com/
任意の種類のヘルプをいただければ幸いです。ありがとう