单张markercluster不显示

如何解决单张markercluster不显示

我做了一个标记，以在传单地图上显示一些地址点并使它们成簇：

var addresspoints = [
      [-37.8210922667,175.2209316333,"2"],[-37.8210819833,175.2213903167,"3"],[-37.8210881833,175.2215004833,"3A"],[-37.8211946833,175.2213655333,"1"],[-37.8209458667,175.2214051333,"5"],[-37.8208292333,175.2214374833,"7"],[-37.8325816,175.2238798667,"537"],[-37.8315855167,175.2279767,"454"],[-37.8096336833,175.2223743833,"176"],[-37.80970685,175.2221815833,"178"],[-37.8102146667,175.2211562833,"190"],[-37.8088037167,175.2242227,"156"],[-37.8112330167,175.2193425667,"210"],[-37.8116368667,175.2193005167,"212"],[-37.80812645,175.2255449333,"146"],[-37.8080231333,175.2286383167,"125"],[-37.8089538667,175.2222222333,"174"],[-37.8080905833,175.2275400667,"129"]
    ]
    for (var i=0; i<addresspoints.length ; i++){
      var a = addresspoints[i];
      var marker = L.marker(new L.latLng( a[0],a[1]));
    }
    var markerClusters = L.markerClusterGroup();
    markerClusters.addLayer(marker);
    map.addLayer(markerClusters);

对于CDN，我添加了以下内容：

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" />

<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js" integrity="sha512-/Nsx9X4HebavoBvEBuyp3I7od5tA0UzAxs+j83KgC8PU0kgB4XiK4Lfe4y4cgBtaRJQEIFCW+oC506aPT2L1zw==" crossorigin=""></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>

但是它仍然不起作用... 我的地图上什么也没显示

解决方法

您需要将每个标记添加到组中，而不仅仅是最后一个：

var markerClusters = L.markerClusterGroup().addTo(map);
for (var i=0; i<addressPoints.length ; i++){
      var a = addressPoints[i];
      var marker = L.marker(new L.latLng( a[0],a[1])).addTo(markerClusters);
}

,

var addressPoints = [
      [-37.8210922667,175.2209316333,"2"],[-37.8210819833,175.2213903167,"3"],[-37.8210881833,175.2215004833,"3A"],[-37.8211946833,175.2213655333,"1"],[-37.8209458667,175.2214051333,"5"],[-37.8208292333,175.2214374833,"7"],[-37.8325816,175.2238798667,"537"],[-37.8315855167,175.2279767,"454"],[-37.8096336833,175.2223743833,"176"],[-37.80970685,175.2221815833,"178"],[-37.8102146667,175.2211562833,"190"],[-37.8088037167,175.2242227,"156"],[-37.8112330167,175.2193425667,"210"],[-37.8116368667,175.2193005167,"212"],[-37.80812645,175.2255449333,"146"],[-37.8080231333,175.2286383167,"125"],[-37.8089538667,175.2222222333,"174"],[-37.8080905833,175.2275400667,"129"]
    ]

var tiles = L.tileLayer('//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
var map = L.map('map',{
  center: L.latLng(-37.8080,175.2275),zoom: 7,layers: [tiles]
});
var mcg = L.markerClusterGroup();
for (var i = 0; i < addressPoints.length; i++) {
  var a = addressPoints[i];
  var title = a[2];
  var marker = L.marker([a[0],a[1]]);
  mcg.addLayer(marker);
}
map.addLayer(mcg);

#map {
  height: 250px;
}

<link href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css" rel="stylesheet"/>
<link href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" rel="stylesheet"/>
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet.js"></script>
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster.js"></script>


<div id="map"></div>

这是您的代码的有效代码段。您必须将每个标记添加到群集组。