無法使用傳單和標記群集顯示GeoJSON數據

Question

我可以使用下面的代碼顯示地圖圖塊，但似乎無法找到一種方法來使用Leaflet的標記集群庫顯示此geoJSON數據。 我能夠在沒有標記群集的情況下顯示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>

Answer 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

無法使用傳單和標記群集顯示GeoJSON數據

問題描述

1 個解決方案

解決方案1
1 2015-06-11 14:19:49

無法使用傳單和標記群集顯示GeoJSON數據

問題描述

1 個解決方案

解決方案1 1 2015-06-11 14:19:49

解決方案1
1 2015-06-11 14:19:49