3

我只是在关注这个关于 Folium 的教程——一个制作 web 地图的 Python 库。该教程指出，只需以下三行 Python 代码即可创建 web 地图：

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

根据教程，这就是 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>
4

2 回答 2

2

在您发布的 HTML 中，所有<link>和<script>标签都使用协议相对 URL。

如果浏览器正在通过 HTTPS 查看当前页面，那么它将使用 HTTPS 协议请求该资产，否则它通常会使用 HTTP 请求它。

当然，如果您在本地查看文件，它会尝试使用file://协议请求文件。

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

于 2015-07-18T16:30:04.213 回答
2

folium 创建的 html 文件旨在通过 http 协议查看。正如 user880772 回答的那样，如果您直接在浏览器中打开文件（方法），它们将不起作用，file://除非您手动将所有相对 url 更改为以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。

于 2015-07-18T23:23:30.753 回答