Leaflet和geojson AJAX調用

我一直在試圖弄清楚如何在傳單中映射一些2,200個數據點，但是我只是研究了JS的世界，並且有很多概念對我來說都是新的。我一直在使用this excellent tutorial作爲如何從geojson文件中提取數據並將其顯示在地圖上的工作示例。然而，我似乎無法讓它與我自己的數據一起工作，我不知道自己做錯了什麼。我嘗試過使用許多不同的託管來源，並使用測試數據和教程數據（作爲geojson文件）來排除它是導致問題的主機或geojson文件。我仍然不確定它是什麼。Leaflet和geojson AJAX調用

下面是我的代碼（使用測試數據，並從教程中的圖標文件），如果有人能夠看看，並告訴我，爲什麼它沒有加載到我的地圖中的數據，我將非常感激！即使對我可以嘗試做的一些建議也會有所幫助。我唯一的編碼背景是R，所以我可能會忽略一些本應該很明顯的東西。

<html> 
<head> 
    <title>A Leaflet map!</title> 
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" /> 
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
    <script src="https://raw.githubusercontent.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js"></script> 
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
    <style> 
    #map{ height: 900px;width: 650px } 
    </style> 
</head> 
<body> 

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

    <script> 

var map = L.map('map').setView([-41.291, -185.229], 6); 

var OpenMapSurfer_Roads = L.tileLayer('http://korona.geog.uni-heidelberg.de/tiles/roads/x={x}&y={y}&z={z}', { 
    maxZoom: 20, 
    attribution: 'Imagery from <a href="http://giscience.uni-hd.de/">GIScience Research Group @ University of Heidelberg</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>' 
}).addTo(map); 


$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson",function(data){ 
    var ratIcon = L.icon({ 
    iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png', 
    iconSize: [60,50] 
    }); 
    L.geoJson(data,{ 
    pointToLayer: function(feature,latlng){ 
    var marker = L.marker(latlng,{icon: ratIcon}); 
    marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT); 
    return marker; 
} 
    }).addTo(map); 
}); 

    </script> 
</body> 
</html>

感謝有人願意通讀這篇文章！

來源

2017-05-20 Whale Biologist

歡迎來到SO！

調試HTML和JavaScript的簡便方法是使用瀏覽器的控制檯，例如Chrome's。

加載頁面時，可能會在控制檯中記錄錯誤消息。我看到關於leaflet-providers.js的mime類型的錯誤。解決方法是將URL與rawgit.com進行轉換。有關更多信息，請參閱here。

新的腳本源將是https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js。

接下來，看起來$.getJSON未執行成功回調，這意味着請求中某處可能存在錯誤。 jQuery的getJSON也返回Promise（請參閱The jqXHR Object），它允許我們將代碼移動一下以查看是否可以捕獲錯誤。

$.getJSON("https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson") 
    .then(function (data) { 
     var ratIcon = L.icon({ 
      iconUrl: 'http://maptimeboston.github.io/leaflet-intro/rat.png', 
      iconSize: [60, 50] 
     }); 
     L.geoJson(data, { 
      pointToLayer: function (feature, latlng) { 
       var marker = L.marker(latlng, { icon: ratIcon }); 
       marker.bindPopup(feature.properties.Location + '<br/>' + feature.properties.OPEN_DT); 
       return marker; 
      } 
     }).addTo(map); 
    }) 
    .fail(function(err){ 
     console.log(err.responseText) 
    });

在我們fail()，我們得到記錄到我們的瀏覽器控制檯一些文本。看起來geojson文件位於bitbucket上的登錄後面。

嘗試從密碼保護區移出geojson文件。

來源

2017-05-20 12:35:52

Leaflet和geojson AJAX調用

回答

相關問題