3
Я просто следил за этим tutorial о Folium - библиотеке Python, которая делает веб-карты. В учебнике говорится, что веб-карта может быть создана только с этими тремя строками кода Python:Простая страница HTML/Javascript, созданная Python, отображается как пусто
import folium
map_osm = folium.Map(location=[45.5236, -122.6750])
map_osm.create_map(path='osm.html')
This это как osm.html должен выглядеть в соответствии с учебника.
Однако файл osm.html отображается в виде пустой веб-страницы в моих браузерах.
Вот исходный код моего файла osm.html, если это помогает:
<!DOCTYPE html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" href="//rawgit.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.css">
<script src="//rawgithub.com/lvoogdt/Leaflet.awesome-markers/2.0/develop/dist/leaflet.awesome-markers.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.Default.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/MarkerCluster.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster-src.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet.markercluster/0.4.0/leaflet.markercluster.js"></script>
<link rel="stylesheet" href="//birdage.github.io/Leaflet.awesome-markers/dist/leaflet.awesome.rotate.css">
<style>
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map {
position:absolute;
top:0;
bottom:0;
right:0;
left:0;
}
</style>
</head>
<body>
<div class="folium-map" id="folium_62f4bc18e7a1444b908b0413335a38b1" style="width: 960px; height: 500px"></div>
<script>
var base_tile = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18,
minZoom: 1,
attribution: 'Map data (c) <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
});
var baseLayer = {
"Base Layer": base_tile
};
/*
addition of the wms layers
*/
/*
addition of the tile layers
*/
/*
list of layers to be added
*/
var layer_list = {
};
/*
Bounding box.
*/
var southWest = L.latLng(-90, -180),
northEast = L.latLng(90, 180),
bounds = L.latLngBounds(southWest, northEast);
/*
Creates the map and adds the selected layers
*/
var map = L.map('folium_62f4bc18e7a1444b908b0413335a38b1', {
center:[20, 40],
zoom: 10,
maxBounds: bounds,
layers: [base_tile]
});
L.control.layers(baseLayer, layer_list).addTo(map);
//cluster group
var clusteredmarkers = L.markerClusterGroup();
//section for adding clustered markers
//add the clustered markers to the group anyway
map.addLayer(clusteredmarkers);
</script>
</body>
Я просто попробовал запустить код, и он отлично работал - по крайней мере, используя Safari 8.0.7. – aaplmath
@aaplmath Я использую Firefox и Chrome. Вы пробовали HTML-код, который я разместил, или вы создали свой собственный HTML, запустив код Python? – multigoodverse
Я пробовал HTML, который вы опубликовали. – aaplmath