标记簇 - 传单 - 无法使其正常工作

Question

所以我想将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 &copy; 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 &copy; 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); with var geojsonLayer = L.geoJson(geojsonFeature,{onEachFeature:onEachFeature, style:setStyle}); 然后我添加clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup); clusterGroup.addLayer(geojsonLayer); map.addLayer(clusterGroup); 在tileLayer之后（如果我在手边的任何地方执行它，页面会在崩溃之前执行永不停止的循环）。

问题是，我得到了聚类，但是当我放大它们时，只显示较小聚类之外的标记。 例如; 如果我进入'5'的簇，则该簇中没有标记出现。

http://puu.sh/kQWoI/4ef5bb11fb.jpg举个例子。

Answer 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。

这是一个简单的示例小提示，显示它工作：

http://fiddle.jshell.net/nathansnider/tw5b0uuq/