无法使用 Leaflet 和 Marker Cluster 显示 GeoJSON 数据答案

【问题标题】：Unable to Display GeoJSON data Using Leaflet and Marker Cluster无法使用 Leaflet 和 Marker Cluster 显示 GeoJSON 数据
【发布时间】：2015-06-10 22:35:46
【问题描述】：

我可以使用下面的代码显示地图图块，但似乎无法找到一种方法来使用 Leaflet 的标记集群库来显示此 geoJSON 数据。我能够在没有 Marker Cluster 的情况下显示 GeoJSON 数据没有问题。我一定遗漏了一些明显的东西。任何帮助将不胜感激。

<!DOCTYPE HTML>
<html>
<head>
    <title>Leaflet GeoJSON Test</title>
    <meta charset="utf-8" />
    <!--Leaflet-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"      href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
     <!--Leaflet-->
</head>
<body>

<div id="map" style="width: 600px; height: 400px"></div>

<!--Marker Cluster-->
<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>
<!--Marker Cluster-->

<script src="..\geoJSON\ga_brewery_master_list.geojson" type="text/javascript"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>

<script>

    var map = L.map('map').setView([33.76088, -84.38599], 5);

    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
            '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
            'Imagery © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-i875mjb7'
    }).addTo(map);

    var geojsonMarkerOptions = {
        radius: 4,
        fillColor: "#ff7800",
        color: "#000",
        weight: 1,
        opacity: 1,
        fillOpacity: 0.8
    };

    var markers = L.markerClusterGroup();

    var geoJsonLayer  = L.geoJson(brew, {
        onEachFeature: function popupContent(feature, layer) {
            layer.bindPopup("<b>Name:</b>" + " " + feature.properties.Name + '<br />'
                                                    + "<b>Type:</b>" + " " + feature.properties.Type
                                                    + '<br />'
                                                    + "<b>Barrels Produced/yr:</b>" + " " + feature.properties.Barrels_Ye
                                                    + '<br />'
                                                    + "<b>Address:</b>" + " " + feature.properties.Address
                                                    + '<br />'
                                                    + "<b>Zip Code:</b>" + " " + feature.properties.Zip_Code
                                                    + '<br />'
                                                    + "<b>City:</b>" + " " + feature.properties.City
                                                    + '<br />'
                                                    + "<b>State:</b>" + " " + feature.properties.State
                                                    + '<br />'
                                                    )
            ;
        },
        pointToLayer: function (feature, latlng) {
            return L.circleMarker(latlng, geojsonMarkerOptions);
        }
    });

    markers.addLayer(geoJsonLayer);

    map.addLayer(markers);
    map.fitBounds(markers.getBounds());

</script>

【问题讨论】：

您能否向我们展示您的实时数据的演示站点？

标签： gis leaflet markerclusterer

【解决方案1】：

这很尴尬，但我发现了问题。我在 Marker Cluster 插件的相对路径中有反斜杠而不是正斜杠。

我只是改变了这个......

<link rel="stylesheet" href="..\dist\MarkerCluster.css" />
<link rel="stylesheet" href="..\dist\MarkerCluster.Default.css" />
<script src="..\dist\leaflet.markercluster-src.js"></script>

到这里……

<link rel="stylesheet" href="../dist/MarkerCluster.css" />
<link rel="stylesheet" href="../dist/MarkerCluster.Default.css" />
<script src="../dist/leaflet.markercluster-src.js"></script>

这解决了问题。这是实时地图，只是为了很好的衡量。

http://sportruminations.com/Leaflet/HTML/test.html

【讨论】：