html - MapTimeBoston 传单教程 RatMap 对象
问题描述
我正在关注https://maptimeboston.github.io/leaflet-intro/对 Leaflet 的介绍。在第一个 Rat Map 中,我的代码未能在地图上显示啮齿动物对象/位置。我直接 c/v 教程代码,但仍然无法在我的地图上获取对象。所有必需的文件都与所使用的 html 文件位于同一目录中(并适当命名)。
我是 HTML、GeoJSON 的新手,但未能找到可用于故障排除的方法。数据文件是完整的并且具有预期的所有值/对象。我习惯了 Python/R/VBA,所以没有错误消息对我来说也是新的。
我正在通过 Chrome 浏览器运行 HTML 文件。HTML 文件是用 Sublime Text 编写的
//make sure you have the jQuery and rodent GeoJSON files in HTML directory
<html>
<head>
<title>A Leaflet map!</title>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css"/>
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<script src="jquery-2.1.1.min.js"></script>
<style>
#map{ height: 100% }
</style>
</head>
<body>
<div id="map"></div>
<script>
// initialize the map
var map = L.map('map').setView([42.35, -71.08], 13);
// load a tile layer
L.tileLayer('http://tiles.mapc.org/basemap/{z}/{x}/{y}.png',
{
attribution: 'Tiles by <a href="http://mapc.org">MAPC</a>, Data by <a href="http://mass.gov/mgis">MassGIS</a>',
maxZoom: 17,
minZoom: 9
}).addTo(map);
// load GeoJSON from an external file
$.getJSON("F://FinanceServer//HTML//rodents.geojson",function(data){
// add GeoJSON layer to the map once the file is loaded
L.geoJson(data).addTo(map);
});
</script>
</body>
</html>
我期待看到类似于上述教程网站的第三张地图的东西。
解决方案
本地文件的 URL 永远不会起作用,尤其是作为绝对路径。
出于众所周知的安全原因,浏览器会阻止您访问客户端文件系统。
即使您直接从文件系统(使用file://
协议)打开 HTML 页面,Chrome 浏览器也会阻止您向其他本地文件发出 AJAX 请求。不过,上次我尝试它可以在其他浏览器中使用。
即使您使用其他浏览器,您的 URL 也应该是相对的,或者指定协议 / 以双斜杠开头以使其绝对。
为了避免大多数这些限制,Web 开发中的标准做法是使用小型本地服务器提供文件。