標記簇 - 傳單 - 無法使其正常工作

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/