我一直在尝试弄清楚如何在传单中映射大约 2,200 个数据点，但是我才刚刚深入研究 JS 的世界，并且有很多概念对我来说都是新的。我一直在使用this excellent tutorial作为如何从 geojson 文件中提取数据并将其显示在 map 上的工作示例。但是，我似乎无法让它与我自己的数据一起工作，而且我不知道我做错了什么。我尝试使用许多不同的托管源，并使用测试数据和教程数据(作为 geojson 文件)来排除是主机还是 geojson 文件导致了问题。我仍然不确定是哪一个。
下面是我的代码(使用测试数据和教程中的图标文件)，如果有人能够看一下并告诉我为什么它没有将数据加载到我的 map 上，我将非常感激!即使是一些关于我可以尝试做什么的建议也会有所帮助。我唯一的编码背景是 R，所以我可能遗漏了一些本来应该很明显的东西。
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="69050c080f050c1d29584759475a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/leaflet.css" />
<script src="https://unpkg.com/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b070e0a0d070e1f2b5a455b4558" rel="noreferrer noopener nofollow">[email protected]</a>/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> — Map data © <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>
感谢任何愿意阅读本文的人!
最佳答案
欢迎来到SO!
调试 HTML 和 JavaScript 的便捷方法是使用浏览器的控制台，例如 Chrome's例如。
加载页面时，控制台中可能会记录错误消息。我看到有关 leaflet-providers.js 的 mime 类型的错误。解决方法是使用 rawgit.com 转换 url。请参阅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 文件移出密码保护区。
关于javascript - Leaflet 和 geojson AJAX 调用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44085311/