所以我想将Marker Cluster合并到我的地图中（显然），但是我遇到了一些问题。 注意：我在一个项目中执行此操作并且没有编写地图本身的代码，但我理解它的要点。
我们从存储在数据库中的geoJSON文件中获取标记的位置，因此我们只引用SQL查询，然后将其插入到地图中（如果这有意义）。
var geojsonFeature = <?php echo $trip['json_data'] ?>;
完整的代码在下面 - 减去SQL连接/查询本身，因为它与我想要实现的内容无关（至少我认为是这样）。
<!-- Create a Leaflet map with the appropriate options -->
var map = L.map('map', {
layers: []
}).setView([-33.85638, 151.2078], 11);
var geojsonFeature = <?php echo $trip['json_data'] ?>;
function onEachFeature(feature, layer) {
// Is this feature a Normal point or a destination
if (feature.properties && feature.properties.destination) {
// This feature is a destination point
var popString = "<b> Destination </b> <br>";
popString += feature.properties.address;
layer.bindPopup(popString);
} else {
// This feature is a normal point
var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
popString += feature.properties.address + "<br>";
popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;
layer.bindPopup(popString);
}
}
function setStyle(feature) {
if (feature.properties.destination) {
console.log("Destination");
// Customer icon for destination
} else {
console.log("Origin");
}
}
<!-- Add the GeoJSON object to the GeoJSON layer -->
L.geoJson(geojsonFeature, { onEachFeature: onEachFeature,
style: setStyle }).addTo(map);
<!-- Set the tile layer to the openstreemap tiles + extra properties -->
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
<!-- Cluster Markers -->
我已经尝试过关注MarkerCluster Git上的文档，但我还是迷路了。
var markers = L.markerClusterGroup();
markers.addLayer(L.marker(getRandomLatLng(map)));
... Add more layers ...
map.addLayer(markers);
有没有人有任何合并标记聚类的经验？如果是这样，有人可以伸出援助之手。
旁注：是的我包含了运行它所需的所有相关文件; JS，MarkerCluster.js - 我从CDN获得了所有这些。
修改 所以我接受了Nathan给出的建议，以下是现在发生的事情。以下是我的新代码。
<!-- Create a Leaflet map with the appropriate options -->
var map = L.map('map', {
layers: []
}).setView([-33.85638, 151.2078], 11);
var clusterGroup = L.markerClusterGroup();
var geojsonFeature = <?php echo $trip['json_data'] ?>;
function onEachFeature(feature, layer) {
// Is this feature a Normal point or a destination
if (feature.properties && feature.properties.destination) {
// This feature is a destination point
var popString = "<b> Destination </b> <br>";
popString += feature.properties.address;
layer.bindPopup(popString);
} else {
// This feature is a normal point
var popString = "<b>" + feature.properties.name + " - " + feature.properties.group +"</b><br>";
popString += feature.properties.address + "<br>";
popString += "<b>Pickup: </b>" + feature.properties.pick_up_time + "<br>";
popString += "<b>Estimated Group Cost: </b>$" + feature.properties.group_travel_cost;
layer.bindPopup(popString);
}
}
function setStyle(feature) {
if (feature.properties.destination) {
console.log("Destination");
// Customer icon for destination
} else {
console.log("Origin");
}
}
<!-- Add the GeoJSON object to the GeoJSON layer -->
var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});
<!-- Set the tile layer to the openstreemap tiles + extra properties -->
L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
attribution: 'Map data © OpenStreetMap contributors'
}).addTo(map);
<!-- Cluster Markers -->
clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);
我在开始时添加了var clusterGroup = L.markerClusterGroup();。
然后我替换了L.geoJson(geojsonFeature, { onEachFeature: onEachFeature,
style: setStyle }).addTo(map);
与var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});
然后我在tileLayer之后添加clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);（如果我事先在任何地方执行它，页面会在崩溃之前执行永不停止的循环）。
问题是，我得到了聚类，但是当我放大聚类时，只显示较小聚类之外的标记。例如;如果我进入一个'5'的簇，那个簇中没有标记出现。
答案 0 :(得分：1)
如果您从查询中获得有效的GeoJSON，您应该能够非常轻松地将其添加到群集中。一个更有用的示例可能是GitHub上的examples目录中的一个：
https://github.com/Leaflet/Leaflet.markercluster/blob/master/example/geojson.html
首先，设置markerClusterGroup：
var clusterGroup = L.markerClusterGroup();
然后将geoJson图层指定给命名变量（但不要将其添加到地图中）：
var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle});
从那里，您可以将图层添加到群集组并将其添加到地图中：
clusterGroup.addLayer(geojsonLayer);
map.addLayer(clusterGroup);
应该这么简单。如果你想真正看到这些集群的图标，还要确保你引用了css文件和js。
这是一个简单的示例小提示，显示它正常工作：