MapTimeBoston Leaflet 教程 RatMap 对象

Question

我正在关注 https://maptimeboston.github.io/leaflet-intro/ 对 Leaflet 的介绍。在第一个 Rat Map 中，我的代码未能在地图上显示啮齿动物 objects/locations。我直接 c/v 教程代码，但仍然无法在我的地图上获取对象。所有必需的文件都在与正在使用的 html 文件相同的目录中（并适当命名）。

我是 HTMLGeoJSON 的新手，一直未能找到可用于排除故障的方法。数据文件是完整的，并且具有预期的所有 values/objects。我已经习惯了 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>

我期待看到类似于上述教程网站的第三张地图的东西。

Answer 1

您本地文件的 URL 永远不会起作用，尤其是作为绝对路径。

出于众所周知的安全原因，浏览器阻止您访问客户端文件系统。

即使您直接从文件系统（使用 file:// 协议）打开 HTML 页面，Chrome 浏览器也会阻止您对其他本地文件发出 AJAX 请求.不过，我上次尝试它在其他浏览器中也能正常工作。

即使您使用其他浏览器，您的 URL 也应该是相对的，或者指定协议/以双斜杠开头使其成为绝对的。

为了避免其中的大部分限制，Web 开发的标准做法是使用小型本地服务器提供文件。

MapTimeBoston Leaflet 教程 RatMap 对象

MapTimeBoston Leaflet Tutorial RatMap Objects

html

geojson

leaflet