Leaflet.markercluster问题与简单的平面地图

时间:2014-01-23 22:13:01

标签: javascript leaflet

Example here

我正在尝试使用传单将聚类添加到美国的平面栅格地图中。我已经让大部分地图正常工作了,我可以放下标记就好了。我试图像这样添加标记簇:

var data = [
  [100,100],
  [100,110],
  [100,120]
];

var mapHeight = 500;
var mapWidth = 750;
var mapPadding = 100;
var imageUrl = 'http://upload.wikimedia.org/wikipedia/commons/9/9d/Blank_map_of_the_United_States.PNG';
var imageBounds = [[mapHeight, 0], [0, mapWidth]];

var map = L.map('leaflet-map', {
    maxZoom: 20,
    minZoom: 0,
    crs: L.CRS.Simple // Simple plane for easier X Y coordinate system
}).setView([mapHeight/2, mapWidth/2], 0); // center the map

// The bounds of the map including any specified padding
map.setMaxBounds(new L.LatLngBounds(
    [mapHeight + mapPadding, 0 - mapPadding],
    [0 - mapPadding, mapWidth + mapPadding]
));

L.imageOverlay(imageUrl, imageBounds).addTo(map);

var markers = new L.MarkerClusterGroup();

data.forEach(function (i) {
  var m = new L.Marker(i);
  markers.addLayer(m); 
});

map.addLayer(markers); // This isn't working for some reason

我没有收到任何javascript或css错误。检查DOM显示没有创建集群对象。我正在使用传单 0.7.1和 leaflet.markercluster 0.2。

问题可能与我正在使用的crs: L.CRS.Simple投影有关吗?

1 个答案:

答案 0 :(得分:1)

这是使用Leaflet MarkerCluster的过时版本:使用新版本和it works perfectly