MapTimeBoston Leaflet Tutorial RatMap Objects
Я слежу за введением в Leaflet от https://maptimeboston.github.io/leaflet-intro/. На первой Rat Map мой код не отображал объекты/местоположения грызунов на карте. Я напрямую включил код учебника и все еще не смог получить объекты на своей карте. Все необходимые файлы находятся в том же каталоге (и имеют соответствующие имена), что и используемый html-файл.
Я новичок в HTML, GeoJSON, и мне не удалось найти метод, который я мог бы использовать для устранения неполадок. Файлы данных завершены и содержат все ожидаемые значения/объекты. Я привык к Python/R/VBA, поэтому отсутствие сообщения об ошибке для меня тоже в новинку.
Я запускаю файл HTML через браузер Chrome. Файлы 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>
Я ожидал увидеть что-то похожее на третью карту с вышеупомянутого обучающего сайта.
Ответы 1
URL-адрес вашего локального файла никогда не должен работать, особенно в качестве абсолютного пути.
Браузеры не позволяют вам получить доступ к файловой системе клиента по хорошо известным причинам безопасности.
Даже если вы откроете свою HTML-страницу непосредственно из файловой системы (по протоколу file://), браузер Chrome не позволит вам делать AJAX-запросы к другим локальным файлам. Однако в прошлый раз, когда я пробовал, он работал в других браузерах.
Даже если вы используете другой браузер, ваш URL-адрес должен быть относительным или указывать протокол / start с двойной косой чертой, чтобы сделать его абсолютным.
Чтобы избежать большинства этих ограничений, стандартной практикой веб-разработки является предоставление файлов на небольшом локальном сервере.
Для сообщений об ошибках: откройте браузер инструменты разработчика.