传单.js文件在Safari中运行，但不能在Firefox、Chrome或IE中运行
Leaflet.js file runs in Safari but not Firefox, Chrome or IE
我正在尝试创建一个映射应用程序，该应用程序使用Leaflet.js将GeoJson文件覆盖在OpenStreetMap文件之上。整个文件如下所示，GeoJson文件位于我的GitHub页面上https://github.com/ELamar/zoning
我可以让文件在Safari中运行，但无法让文件在Firefox、Chrome或IE中运行。这些浏览器的网络检查器中没有任何错误。JSON文件非常大（一个是9MB，另一个大约是6MB），我已经在文件中嵌套了读取的回调。问题可能是数据太多，无法在这些浏览器中运行吗？如果是这样，为什么它会在Safari中运行？
如有任何帮助，我们将不胜感激。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.css" />
</head>
<style>
svg {
position: relative;
}
</style>
<!--This file illustrates a map of Leon County Florida, complete with
2010 census block heatmap of population-->
<h1>This is a Draft Concept for a Collaborative Zoning Map.</h1>
<body>
<div id="map" style="width: 900px; height: 600px"></div>
<div id="detail" style="width: 30%; height: 600px"></div>
<script type="text/javascript" src="./d3.v3.js" charset="utf-8"></script>
<!--<script src="http://cdn.leafletjs.com/leaflet-0.7.2/leaflet.js"></script>-->
<script type="text/javascript" src="./leaflet.js"></script>
<!--<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>-- >
<script src="./jquery-1.9.1.js"></script>
<!--<script src="./flare4.json"></script>-->
<!--<script src="./flare5.json"></script>-->
<script>
var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];
function initmap() {
// set up the map
map = new L.Map('map');
// create the tile layer with correct attribution
//var osmUrl='http://www.openstreetmap.org/#map=13/30.4467/-84.3087';
//var osmUrl='http://osm.org/go/ZGUQ8RJ';
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 18, attribution: osmAttrib});
// start the map in Tallahassee Florida
//map.setView(new L.LatLng(30.4467,-84.3087),11); //sets view to Leon County
map.setView(new L.LatLng(30.4606,-84.2780),15); //sets view to MidTown Tallahassee
map.addLayer(osm);
}
initmap();
var osmUrl='http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
var osmAttrib='Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors';
var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 18, attribution: osmAttrib});
var baselayers = {"baselayer":osm};
function onEachFeature(feature, layer){
var med_age = feature.properties.median_age;
var str = med_age.toString();
layer.bindPopup("Media age: " + str);
// if (med_age > 0){
// layer.setStyle({fillOpacity:0.7});
// }
// else{
// layer.setStyle({fillOpacity:0});
// }
// [0,15,25,35,45,55,65,75,85])
if (med_age > 85){layer.setStyle({fillColor:"#03f",fillOpacity:0.9});}
else if (med_age > 75) {layer.setStyle({fillColor:"#08306B",fillOpacity:0.5});}
else if (med_age > 65) {layer.setStyle({fillColor:"#08519C",fillOpacity:0.5});}
else if (med_age > 55) {layer.setStyle({fillColor:"#2171B5",fillOpacity:0.5});}
else if (med_age > 45) {layer.setStyle({fillColor:"#4292C6",fillOpacity:0.5});}
else if (med_age > 35){layer.setStyle({fillColor:"#6BAED6",fillOpacity:0.5});}
else if (med_age > 25){layer.setStyle({fillColor:"#9ECAE1",fillOpacity:0.5});}
else if (med_age > 15){layer.setStyle({fillColor:"#C6DBEf",fillOpacity:0.5});}
else if (med_age > 0){layer.setStyle({fillColor:"#DEEBF7",fillOpacity:0.5});}
else {layer.setStyle({fillColor:"#f7fbff", fillOpacity:0});}
layer.on("mouseover", function (e) {
//var txt = layer.bindPopup(feature.properties.median_age);
// var text = layer.bindPopup(str);
var box = document.getElementById('detail');
//layer.bindPopup(feature.properties.median_age);
box.innerHTML = "Median age: " + str;
});
layer.on("mouseout", function (e) {
box = document.getElementById('detail');
box.innerHTML="";
});
}
function onEachFeature_zone(feature, layer){
layer.bindPopup("ID: " + feature.id + "<br>" + "Zoning: " + feature.properties.zoning);
}
function onEachFeature_active(feature, layer){
layer.bindPopup("ID: " + feature.id + "<br>" + "Zoning: " + feature.properties.zoning + "<br>" + "<a href='https://github.com/ELamar/Superior-Planning-PUD'>Comment Here</a>");
}
function onEachFeature_pop(feature, layer){
var pop = feature.properties.population;
var str = pop.toString();
layer.bindPopup("Population: " + str);
// if (med_age > 0){
// layer.setStyle({fillOpacity:0.7});
// }
// else{
// layer.setStyle({fillOpacity:0});
// }
// [0,15,25,35,45,55,65,75,85])
//[0,11,51,101,251,501,901,1201,1500])
if (pop > 1500){layer.setStyle({fillColor:"#03f",fillOpacity:0.9});}
else if (pop > 1201) {layer.setStyle({fillColor:"#08306B",fillOpacity:0.5});}
else if (pop > 901) {layer.setStyle({fillColor:"#08519C",fillOpacity:0.5});}
else if (pop > 501) {layer.setStyle({fillColor:"#2171B5",fillOpacity:0.5});}
else if (pop > 251) {layer.setStyle({fillColor:"#4292C6",fillOpacity:0.5});}
else if (pop > 101) {layer.setStyle({fillColor:"#6BAED6",fillOpacity:0.5});}
else if (pop > 51) {layer.setStyle({fillColor:"#9ECAE1",fillOpacity:0.5});}
else if (pop > 11) {layer.setStyle({fillColor:"#C6DBEf",fillOpacity:0.5});}
else if (pop > 0) {layer.setStyle({fillColor:"#DEEBF7",fillOpacity:0.5});}
else {layer.setStyle({fillColor:"#f7fbff", fillOpacity:0});}
layer.on("mouseover", function (e) {
//var txt = layer.bindPopup(feature.properties.median_age);
// var text = layer.bindPopup(str);
var box = document.getElementById('detail');
//layer.bindPopup(feature.properties.median_age);
box.innerHTML = "Population: " + str;
});
layer.on("mouseout", function (e) {
box = document.getElementById('detail');
box.innerHTML="";
});
}
$.getJSON("./flare5.json", function(json){
var geojson_d3 = L.geoJson(json,{
weight:0,onEachFeature:onEachFeature
})
var geojson3_d3 = L.geoJson(json,{
weight:0, onEachFeature:onEachFeature_pop
})
var overlays = {"median_age" : geojson_d3, "population":geojson3_d3};
$.getJSON("./flare4.json", function(data){
var geojson2_d3 = L.geoJson(data,{fill:true, weight:1.5, color:'#800026', fillOpacity: 0, onEachFeature:onEachFeature_zone}) //function(feature,layer) {layer.bindPopup(feature.properties.zoning)}})
overlays["zoning"] = geojson2_d3;
$.getJSON("./flare7.json", function(active){
var geojson2_d4 = L.geoJson(active,{fill:true, weight:1.5, color:'#800026', fillOpacity: 0, onEachFeature:onEachFeature_active}) //function(feature,layer) {layer.bindPopup(feature.properties.zoning)}})
overlays["active zoning"] = geojson2_d4;
var control = L.control.layers(baselayers, overlays).addTo(map)}
);
}
);
}
);
</script>
</body>
</html>
我在回答我自己的问题。一位朋友建议我再看一次数据检索。我通过jsonlint.com运行json代码片段，注意到json文件没有得到验证，因为我用分号终止了每个文件。显然Safari会以这种方式解析json文件，但其他浏览器不会。删除分号后，这些文件在IE和Firefox中运行良好。我还没有在Chrome中测试过它，但我怀疑它现在可以工作了。
谢谢大家的建议。
相关文章：
- chrome扩展:尽管运行了at:documentidle，js脚本还是过早启动
- 为什么不是't运行此Javascript的Chrome
- 从Chrome扩展名中的popup.html文件在background.js文件中运行一个函数
- jQuery自动完成在Firefox中运行良好，但在Chrome中则不然
- 如何让JS脚本在导航后继续运行(谷歌chrome控制台）
- 多次运行相同的Javascript Chrome扩展
- Javascript赢得'不能在IE上编译，但可以在Chrome上运行
- 从已经运行的进程打开chrome扩展的背景页
- 以下颜色更改功能在IE9和Firefox中运行良好，但在早期的IE或Chrome中则不然
- Chrome没有加载最新版本的web工作程序脚本(运行缓存版本）
- Chrome扩展:是否有一种方法可以运行JavaScript来获取页面上的内部html，并将其保存到扩展中的变量中
- Javascript'元素'在ie中未定义，但在chrome和firefox中运行良好
- HTML中的onclick事件<选择>无法运行Chrome和Safari
- 关闭运行 chrome 扩展程序的弹出窗口
- 如何为每个标签单独运行 Chrome 扩展程序功能
- 在后台运行chrome扩展的HTML页面
- 我怎么知道运行Chrome的哪个脚本会打开一个新的弹出窗口
- 我可以从JS运行chrome包应用程序
- 有没有一种方法来运行Chrome扩展而不点击
- 在浏览器选项卡内运行Chrome打包应用程序
