标记聚类不显示 - 编程之家

如何解决标记聚类不显示

我正在尝试使用Leaflet.markercluster插件在我的地图上聚集标记（每个标记都是手动创建的）。

有人知道我在做什么吗？我看到了地图和我的两个点，但没有看到两个点的簇。

此外，我想用许多标记填充地图，但是它不起作用。谢谢！

<!DOCTYPE html>
<html>
<head>
    <!-- need jQuery for AJXA -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet-src.js" integrity="sha512-WXoSHqw/t26DszhdMhOXOkI7qCiv5QWXhH9R7CgvgZMHz1ImlkVQ3uNsiQKu5wwbbxtPzFXd1hK4tzno2VqhpA==" crossorigin=""></script>
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" href="screen.css" />
<link rel="stylesheet" href="../Desktop/MarkerCluster.css" />
<link rel="stylesheet" href="../Desktop/MarkerCluster.Default.css" />
<script src ="https://unpkg.com/browse/leaflet.markercluster@1.4.1/dist/leaflet.markercluster.js"></script>
<script src ="https://unpkg.com/browse/leaflet.markercluster@1.4.1/dist/MarkerCluster.css"></script>
<script src ="https://unpkg.com/browse/leaflet.markercluster@1.4.1/dist/MarkerCluster.Default.css"></script>
   <!-- Code from https://github.com/macek/jquery-serialize-object -->
    <script>
        /**
         * jQuery serializeObject
         * @copyright 2014,macek <paulmacek@gmail.com>
         * @link https://github.com/macek/jquery-serialize-object
         * @license BSD
         * @version 2.5.0
         */
        ! function(e,i) {
            if ("function" == typeof define && define.amd) define(["exports","jquery"],function(e,r) {
                return i(e,r)
            });
            else if ("undefined" != typeof exports) {
                var r = require("jquery");
                i(exports,r)
            } else i(e,e.jQuery || e.Zepto || e.ender || e.$)
        }(this,i) {
            function r(e,r) {
                function n(e,i,r) {
                    return e[i] = r,e
                }

                function a(e,i) {
                    for (var r,a = e.match(t.key); void 0 !== (r = a.pop());)
                        if (t.push.test(r)) {
                            var u = s(e.replace(/\[\]$/,""));
                            i = n([],u,i)
                        } else t.fixed.test(r) ? i = n([],r,i) : t.named.test(r) && (i = n({},i));
                    return i
                }

                function s(e) {
                    return void 0 === h[e] && (h[e] = 0),h[e]++
                }

                function u(e) {
                    switch (i('[name="' + e.name + '"]',r).attr("type")) {
                        case "checkBox":
                            return "on" === e.value ? !0 : e.value;
                        default:
                            return e.value
                    }
                }

                function f(i) {
                    if (!t.validate.test(i.name)) return this;
                    var r = a(i.name,u(i));
                    return l = e.extend(!0,l,r),this
                }

                function d(i) {
                    if (!e.isArray(i)) throw new Error("formSerializer.addPairs expects an Array");
                    for (var r = 0,t = i.length; t > r; r++) this.addPair(i[r]);
                    return this
                }

                function o() {
                    return l
                }

                function c() {
                    return JSON.stringify(o())
                }
                var l = {},h = {};
                this.addPair = f,this.addPairs = d,this.serialize = o,this.serializeJSON = c
            }
            var t = {
                validate: /^[a-z_][a-z0-9_]*(?:\[(?:\d*|[a-z0-9_]+)\])*$/i,key: /[a-z0-9_]+|(?=\[\])/gi,push: /^$/,fixed: /^\d+$/,named: /^[a-z0-9_]+$/i
            };
            return r.patterns = t,r.serializeObject = function() {
                return new r(i,this).addPairs(this.serializeArray()).serialize()
            },r.serializeJSON = function() {
                return new r(i,this).addPairs(this.serializeArray()).serializeJSON()
            },"undefined" != typeof i.fn && (i.fn.serializeObject = r.serializeObject,i.fn.serializeJSON = r.serializeJSON),e.FormSerializer = r,r
        });
    </script>

    <div id="left">
        <div id="google-form">
            <form action="https://docs.google.com/forms/d/e/1FAIpQLSe3K5mmm5Fzezpltxb0dmElMxJYMpyMkujwPjbjPbiGRa1MPQ/viewform?usp=sf_link" target="hiddenFrame">
                <iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
                <h2>Tell us about a time you cried at Yale.</h2>
                <p class="caption">Responses may be edited for clarity and length.</p>
                <textarea jsname="YPqjbf" jscontroller="gZjhIf" jsaction="input:Lg5SV;ti6hGc:XMgOHc;rcuQ6b:WYd;" required="" name="entry.643682983" dir="auto" data-initial-dir="auto"></textarea>
                <div id="buttons">
                    <input type="button" id="drag" value="Add pin to map" name="entry.2117530617">
                    <input id="location" type="text" jsname="YPqjbf" autocomplete="off" tabindex="0" name="entry.2117530617" value="" required="" dir="auto" data-initial-dir="auto" data-initial-value="" style="display: none">
                    <input class="button" id="submit" type="submit" value="Submit" disabled="true">
                </div>
            </form>
        </div>
    </div>
    <style>
        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 30%;
            right: 0;
        }
    </style>
    <script>
    </script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js">
    </script>
    <div class="marker-menu">
        <img class="draggable-marker" src="images/marker-icon.png" alt="marker" />
    </div>
</head>

<body>

    <div id="map"></div>

    <script type="text/javascript">


        var tiles = L.tileLayer('https://api.maptiler.com/maps/streets/256/{z}/{x}/{y}.png?key=wZnhwGRqtomo0QHvxpxW',{
                maxZoom: 18,attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
            }),latlng = L.latLng(41.310970,-72.931990);


        var map = L.map('map',{center: latlng,zoom: 15,layers: [tiles]});


        var markers = L.marker([41.310253,-72.92642]);
        map.addLayer(markers);
        var markers = L.marker([41.310970,-72.931992]);
        map.addLayer(markers);
        var markers = L.markerClusterGroup();

        markers.on('clusterclick',function (a) {
            a.layer.spiderfy();
        });

        function populate() {
            for (var i = 0; i < 1000; i++) {
                var m = L.marker(getRandomLatLng(map));
                markers.addLayer(m);
            }
            return false;
        }

        function getRandomLatLng(map) {
            var bounds = map.getBounds(),southWest = bounds.getSouthWest(),northEast = bounds.getnorthEast(),lngSpan = northEast.lng - southWest.lng,latSpan = northEast.lat - southWest.lat;

            return L.latLng(
                    southWest.lat + latSpan * Math.random(),southWest.lng + lngSpan * Math.random());
        }


        populate();
        map.addLayer(markers);
    </script>
</body>
</html>

解决方法

虽然与Leaflet相关的JS代码看起来还可以，但是您可能在浏览器控制台中弹出错误（打开浏览器开发人员工具）。

查看您的HTML代码：

您加载了两次Leaflet，使L名称空间第二次被覆盖
您尝试仅在第一次Leaflet加载后才加载Leaflet.markercluster，仅使用L工厂来扩充“第一个” L.markerClusterGroup名称空间，而第二个（最终）L会这样做没有它
您尝试通过错误的路径加载Leaflet.markercluster资产

因此：

只加载一次传单就足够了
确保在上次Leaflet加载后加载Leaflet.markercluster
修复Leaflet.markercluster资产的路径（删除“浏览”部分）