Javascript 传单和AJAX调用
我一直在试图找出如何在传单中映射2200个数据点，但我只是刚刚深入研究了JS的世界，有很多概念对我来说都是新的。我一直在使用一个工作示例，演示如何从geojson文件中提取数据并将其显示在地图上。然而，我似乎无法让它与我自己的数据一起工作，我不知道我做错了什么。我尝试过使用许多不同的托管源，并使用测试数据和教程数据（作为geojson文件）来排除是主机还是geojson文件导致了问题。我仍然不确定它是哪一个 下面是我的代码（使用教程中的测试数据和图标文件），如果有人能看一下并告诉我为什么没有将数据加载到我的地图上，我将不胜感激！甚至一些关于我可以尝试做什么的建议都会有所帮助。我唯一的编码背景是R，所以我可能遗漏了一些本应显而易见的东西Javascript 传单和AJAX调用,javascript,ajax,leaflet,geocoding,geojson,Javascript,Ajax,Leaflet,Geocoding,Geojson,我一直在试图找出如何在传单中映射2200个数据点，但我只是刚刚深入研究了JS的世界，有很多概念对我来说都是新的。我一直在使用一个工作示例，演示如何从geojson文件中提取数据并将其显示在地图上。然而，我似乎无法让它与我自己的数据一起工作，我不知道我做错了什么。我尝试过使用许多不同的托管源，并使用测试数据和教程数据（作为geojson文件）来排除是主机还是geojson文件导致了问题。我仍然不确定它是哪一个 下面是我的代码（使用教程中的测试数据和图标文件），如果有人能看一下并告诉我为什么没有将数
<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> — 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>
单张地图！
#地图{高度：900px；宽度：650px}
var map=L.map（'map'）.setView（[-41.291，-185.229]，6）；
var OpenMapSurfer_Roads=L.Tillelayer（'http://korona.geog.uni-heidelberg.de/tiles/roads/x={x} &y={y}&z={z}'{
maxZoom:20，
属性：“来自&mdash；地图数据&mdash；的图像”
}).addTo（地图）；
$.getJSON（“https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson，函数（数据）{
var ratIcon=L.icon({
伊克努尔：'http://maptimeboston.github.io/leaflet-intro/rat.png',
iconSize:[60,50]
});
L.geoJson（数据、{
pointToLayer：功能（特性、latlng）{
var marker=L.marker（latlng，{icon:ratIcon}）；
marker.bindpoop（feature.properties.Location+'
'+feature.properties.OPEN_DT）；
返回标记；
}
}).addTo（地图）；
});
$.getJSONgetJSON$.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)
});
$.getJSON（“https://bitbucket.org/whalebiologist/website-map/raw/58abf2f24696fef437c294c02e55019d1c6554e4/churches_short.geojson")
.then（功能（数据）{
var ratIcon=L.icon({
伊克努尔：'http://maptimeboston.github.io/leaflet-intro/rat.png',
iconSize:[60,50]
});
L.geoJson（数据、{
pointToLayer：功能（特性、latlng）{
var marker=L.marker（latlng，{icon:ratIcon}）；
marker.bindpoop（feature.properties.Location+'
'+feature.properties.OPEN_DT）；
返回标记；
}
}).addTo（地图）；
})
.失败（功能（错误）{
console.log（err.responseText）
});
fail（）