Fatal编程技术网
  • javascript/
  • Python创建的简单HTML/Javascript页面显示为空白

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

javascript python html leaflet

Python创建的简单HTML/Javascript页面显示为空白,javascript,python,html,leaflet,folium,Javascript,Python,Html,Leaflet,Folium,我只是关注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文件的源代码（如果有帮助）： <!D

我只是关注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>


html，正文{
宽度：100%；
身高：100%；
保证金：0；
填充：0；
}
#地图{
位置：绝对位置；
排名：0；
底部：0；
右：0；
左：0；
}
var base_tile=L.tileLayer（'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'{
maxZoom:18，
minZoom:1，
属性：“地图数据（c）贡献者”
});
var baseLayer={
“基层”：基层瓷砖
};
/*
添加wms层
*/
/*
添加瓷砖层
*/
/*
要添加的图层列表
*/
变量层列表={
};
/*
边界框。
*/
西南风=L.latLng（-90，-180），
东北=拉特林（90180），
边界=L.latLngBounds（西南、东北）；
/*
创建地图并添加选定图层
*/
var map=L.map（'folium_62F4BC18E7A1444B908B041335A38B1'{
中间：[20,40]，
缩放：10，
maxBounds:bounds，
层：[基础砖]
});
L.控制层（基本层、层列表）。添加到（地图）；
//簇群
var clusteredmarkers=L.markerClusterGroup（）；
//用于添加聚集标记的部分
//仍要将聚集标记添加到组中
map.addLayer（clusteredmarkers）；
在您发布的HTML中，所有的
和
标记都使用

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

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

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

folium创建的html文件旨在通过http协议查看。正如user880772所回答的，如果您直接在浏览器中打开文件（
file://
方法），则这些URL将不起作用，除非您手动将所有相关URL更改为以
http://
开头的URL

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

# Python 2.x
python -m SimpleHTTPServer
或

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

有关详细信息，请参阅。

我刚刚尝试运行了您的代码，它运行得非常好-至少使用了Safari 8.0.7。@aaplmath我使用的是Firefox和Chrome。您是否尝试了我发布的HTML代码，还是通过运行Python代码创建了自己的HTML？我尝试了您发布的HTML。 
# Python 3.x
python -m http.server