传单和geojson AJAX调用

Question

I've been trying to figure out how to map some 2,200 data points in leaflet, however I've only just delved into the world of JS and there's a lot of concepts that are new to me. 我一直在尝试找出如何在传单中映射大约2200个数据点，但是我只是深入研究JS领域，对我来说有很多新概念。 I've been using this excellent tutorial as a working example of how to pull data from a geojson file and have it appear on your map. 我一直在使用这个出色的教程作为如何从geojson文件中提取数据并将其显示在地图上的工作示例。 However, I can't seem to get it to work with my own data and I don't know what I'm doing wrong. 但是，我似乎无法使其用于我自己的数据，而且我不知道自己在做什么错。 I have tried using numerous different hosting sources and using both the test data and the tutorial data (as geojson files) to troubleshoot whether it's the host or the geojson file that was causing problems. 我尝试使用许多不同的托管源，并同时使用测试数据和教程数据（作为geojson文件）来解决是引起问题的是主机还是geojson文件。 I am still not sure which it is. 我仍然不确定是哪个。

Below is my code (using test data and the icon files from the tutorial), if anybody is able to take a look and tell me why it's not loading the data onto my map I would be so grateful! 下面是我的代码（使用测试数据和教程中的图标文件），如果有人可以看看并告诉我为什么它没有将数据加载到我的地图上，我将非常感激！ Even some suggestions for what I could try doing would help. 甚至一些我可以尝试做的建议都会有所帮助。 My only background in coding is with R, so there's probably something I am missing that should have been obvious. 我唯一的编码背景是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>

Thanks to anybody willing to read through this! 感谢任何愿意阅读此书的人！

Answer 1

Welcome to SO! 欢迎来到SO！

A handy way to debug HTML and JavaScript is with your browser's console, like Chrome's for example. 调试HTML和JavaScript的便捷方法是使用浏览器的控制台，例如Chrome浏览器。

When you load your page, there may be error messages logged in the console. 加载页面时，控制台中可能会记录错误消息。 I'm seeing an error about mime types for the leaflet-providers.js. 我看到关于leaflet-providers.js的mime类型错误。 The fix for that is to convert the url with rawgit.com. 解决此问题的方法是使用rawgit.com转换网址。 See here for more info. 有关更多信息，请参见此处。

The new script source would be https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js . 新的脚本源为https://rawgit.com/leaflet-extras/leaflet-providers/master/leaflet-providers.js 。

Next, it appears that $.getJSON isn't executing the success callback, which means there might be an error somewhere in the request. 接下来，似乎$.getJSON没有执行成功回调，这意味着请求中某处可能有错误。 jQuery's getJSON also returns a Promise (see The jqXHR Object ), which allows us to move the code around a bit to see if we can catch an error. jQuery的getJSON还返回Promise（请参见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)
    });

In our fail() , we get some text logged to our browser console. 在我们的fail() ，我们将一些文本记录到浏览器控制台中。 Looks like the geojson file is sitting behind a login on bitbucket. 看起来geojson文件位于bitbucket的登录名后面。

Try moving the geojson file out from a password protected area. 尝试将geojson文件从受密码保护的区域移出。

传单和geojson AJAX调用

问题描述

1 个解决方案

解决方案1
3 2017-05-20 12:35:52

传单和geojson AJAX调用

问题描述

1 个解决方案

解决方案1 3 2017-05-20 12:35:52

解决方案1
3 2017-05-20 12:35:52