Блог

Главная - Вопросы по программированию - листовка markercluster не отображается

листовка markercluster не отображается

#javascript #json #leaflet #markerclusterer #leaflet.markercluster

#javascript #json #листовка #markerclusterer #листовка.markercluster

Вопрос:

Я создал markeckuster, чтобы показать некоторые адресные точки на моей карте листовки и сделать их кластерными:

 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>

но это все равно не сработает…
на моей карте ничего не отображается

Ответ №1:

Вам нужно добавить каждый маркер в группу, а не только последний:

 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);
}

Комментарии:

1. Вау, это сработало!! хм, так что нужно добавить все … спасибо вам ооочень много 🙂

Ответ №2:

 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>

Вот рабочий фрагмент с вашим кодом. Вы должны добавить каждый маркер в группу кластеров.