Leaflet 和 geojson AJAX 调用答案

【问题标题】：Leaflet and geojson AJAX callsLeaflet 和 geojson AJAX 调用
【发布时间】：2017-05-20 11:27:52
【问题描述】：

我一直试图弄清楚如何在传单中映射大约 2,200 个数据点，但是我才刚刚深入研究 JS 的世界，并且有很多概念对我来说是新的。我一直在使用this excellent tutorial 作为如何从geojson 文件中提取数据并将其显示在地图上的工作示例。但是，我似乎无法让它与我自己的数据一起使用，而且我不知道我做错了什么。我尝试使用许多不同的托管源，并使用测试数据和教程数据（作为 geojson 文件）来解决是主机还是导致问题的 geojson 文件。我仍然不确定它是哪个。

以下是我的代码（使用测试数据和教程中的图标文件），如果有人能够查看并告诉我为什么它没有将数据加载到我的地图上，我将不胜感激！甚至一些关于我可以尝试做什么的建议也会有所帮助。我唯一的编码背景是 R，所以我可能缺少一些应该很明显的东西。

<html>
<head>
  <title>A Leaflet map!</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.0.3/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>

感谢任何愿意阅读本文的人！

【问题讨论】：

标签： javascript ajax leaflet geocoding geojson

【解决方案1】：

欢迎来到 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 文件从密码保护区域中移出。

【讨论】：