Python创建的简单HTML / Javascript页面显示为空白

Question

I was just following this tutorial about Folium - a Python library that makes web maps. 我刚刚学习了关于Folium的教程 - 一个制作Web地图的Python库。 The tutorial states that a web map can be created with only these three lines of Python code: 该教程指出，只使用这三行Python代码就可以创建Web地图：

import folium
map_osm = folium.Map(location=[45.5236, -122.6750])
map_osm.create_map(path='osm.html')

This is how the osm.html should look like according to the tutorial. 根据教程，这就是osm.html的样子。

However, the osm.html file is showing up as just a blank webpage on my browsers. 但是，osm.html文件在我的浏览器中只显示为空白网页。

Here is the source code of my osm.html file if that helps: 这是我的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>

Answer 1

In the HTML you posted, all of the <link> and <script> tags use protocol relative URLs . 在您发布的HTML中，所有<link>和<script>标记都使用协议相对URL 。

If the browser is viewing that current page in through HTTPS, then it'll request that asset with the HTTPS protocol, otherwise it'll typically request it with HTTP. 如果浏览器通过HTTPS查看当前页面，那么它将使用HTTPS协议请求该资产，否则它通常会使用HTTP请求它。

Of course, if you're viewing the file locally, it'll try to request the file with the file:// protocol. 当然，如果您在本地查看文件，它将尝试使用file:// protocol请求该文件。

I think you viewed the file locally, so the browser tried to find the non-existent script/CSS files on your computer. 我认为您在本地查看了该文件，因此浏览器尝试在您的计算机上查找不存在的脚本/ CSS文件。 Simply adding http: before all the links would work. 只需在所有链接都可以使用之前添加http:

Answer 2

The html files created by folium are designed to be viewed through the http protocol. folium创建的html文件旨在通过http协议查看。 As user880772 answered, they won't work if you open the file directly in your browser ( file:// method) unless you manually change all the relative urls into urls prepended with http:// . 当user880772回答时，如果您直接在浏览器中打开文件（ file://方法），它们将无法工作，除非您手动将所有相对URL更改为前缀为http:// URL。

To proceed by viewing the file through http (without having to edit the html): in a terminal, in the directory containing the html file, run: 要继续通过http查看文件（无需编辑html）：在终端中，在包含html文件的目录中，运行：

# Python 2.x
python -m SimpleHTTPServer

or 要么

# Python 3.x
python -m http.server

Then visit http://localhost:8000/ in your browser and navigate to the html file created by folium. 然后在浏览器中访问http://localhost:8000/并导航到folium创建的html文件。

See https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally for more information. 有关更多信息，请参阅https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally 。

Python创建的简单HTML / Javascript页面显示为空白

问题描述

2 个解决方案

解决方案1
2 已采纳 2015-07-18 16:30:04

解决方案2
2 2015-07-18 23:23:30

Python创建的简单HTML / Javascript页面显示为空白

问题描述

2 个解决方案

解决方案1 2 已采纳 2015-07-18 16:30:04

解决方案2 2 2015-07-18 23:23:30

解决方案1
2 已采纳 2015-07-18 16:30:04

解决方案2
2 2015-07-18 23:23:30