如何将leaflet.markercluster插件添加到代码中？

Question

我想知道有没有人能帮我。我是编程新手，我正在尝试在我的站点中实现传单标记集群，但是当我从GitHub添加使用时，什么也没有显示出来。

​

var BPalace = L.icon({
  iconUrl: 'img/icons8-marker-50.png',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [1, -30],
});

var marker1 = L.marker([51.5015385807725, -0.14176521957406812], {
  icon: BPalace
}).bindPopup('Buckingham Palace');


var BatterseaPark = L.icon({
  iconUrl: 'img/icons8-marker-50.png',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [1, -30],
});

var marker2 = L.marker([51.478988287721876, -0.15648732182296068], {
  icon: BatterseaPark
}).bindPopup('Battersea Park');


var wembley = L.icon({
  iconUrl: 'img/icons8-marker-50.png',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [1, -30],
});

var marker3 = L.marker([51.55619811605852, -0.2794567696109353], {
  icon: wembley
}).bindPopup('Wembley Stadium');

var bAirport = L.icon({
  iconUrl: 'img/icons8-marker-50.png',
  iconSize: [30, 30],
  iconAnchor: [15, 30],
  popupAnchor: [1, -30],
});

var marker4 = L.marker([52.452333381857784, -1.7435316209846132], {
  icon: bAirport
}).bindPopup('Birmingham Airport');


L.featureGroup([marker1, marker2, marker3, marker4])
  .addTo(mymap);


var markers = L.markerClusterGroup();
markers.addLayer(L.marker(marker1(map)));
map.addLayer(markers).addTo(mymap);

​

我是不是做错了什么？我已经将相关文件添加到我的html页面，但当我刷新时，似乎什么也没有发生。

任何帮助都将不胜感激。

谢谢

Answer 1

您的尝试是正确的，但代码不正确，请将其更改为：

var markers = L.markerClusterGroup();
marker1.addTo(markers);
marker2.addTo(markers);
marker3.addTo(markers);
marker4.addTo(markers);
markers.addTo(mymap);

并删除：

L.featureGroup([marker1, marker2, marker3, marker4])
  .addTo(mymap);