单张markercluster不显示 [英] leaflet markercluster doesn't display
本文介绍了单张markercluster不显示的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我做了一个标记,以在我的传单地图上显示一些地址点并使它们成簇:
I've made a markeckuster to show some address points on my leaflet map and make them cluster:
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,我添加了以下内容:
and for the cdn, I added these:
<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>
但是它仍然不起作用...我的地图上什么也没显示
but it still won't work... there's nothing displaying on my map
推荐答案
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>
这是您的代码的有效代码段.您必须将每个标记添加到群集组.
Here is the working snippet with your code. You have to add every marker to the cluster group.
这篇关于单张markercluster不显示的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文