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

Question

我刚刚关注这个 tutorial 关于 Folium - 一个制作 web 地图的 Python 库。本教程指出仅使用这三行 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>

Answer 1

在您发布的 HTML 中，所有 <link> 和 <script> 标签都使用 protocol relative URLs。

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.

Of course, if you’re viewing the file locally, it’ll try to request the file with the file:// protocol.

我认为您在本地查看了该文件，因此浏览器试图在您的计算机上查找不存在的 script/CSS 文件。只需在所有链接都起作用之前添加 http:。

Answer 2

folium 创建的 html 文件旨在通过 http 协议查看。正如 user880772 回答的那样，如果您直接在浏览器中打开文件（file:// 方法），它们将无法工作，除非您手动将所有相对网址更改为前缀为 http://.

的网址

继续通过 http 查看文件（无需编辑 html）：在终端中，在包含 html 文件的目录中，运行:

# Python 2.x
python -m SimpleHTTPServer

或

# Python 3.x
python -m http.server

然后在浏览器中访问 http://localhost:8000/ 并导航到由 folium 创建的 html 文件。

有关详细信息，请参阅 https://github.com/mrdoob/three.js/wiki/How-to-run-things-locally。

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

Simple HTML/Javascript page created by Python shows as blank

html

javascript

python

leaflet

folium