将 OpenLayers 滑动地图嵌入到 Sphinx reStructuredText 页面中

Question

我想在我的 sphinx 页面中嵌入一张 slippy 地图。

我正在尝试这个简单的例子：https://wiki.openstreetmap.org/wiki/OpenLayers_Marker_Example

所以我的第一个文档是：

.. raw:: html

   <body>
      <div id="mapdiv"></div>
      <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
      <script>
         map = new OpenLayers.Map("mapdiv");
         map.addLayer(new OpenLayers.Layer.OSM());

         var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
               .transform(
                  new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
                  map.getProjectionObject() // to Spherical Mercator Projection
               );
               
         var zoom=16;

         var markers = new OpenLayers.Layer.Markers( "Markers" );
         map.addLayer(markers);
         
         markers.addMarker(new OpenLayers.Marker(lonLat));
         
         map.setCenter (lonLat, zoom);
      </script>
   </body>

但是页面上没有任何内容。

我曾尝试使用其他 javascript 映射 api，例如 leaflet，但没有成功。我刚开始使用 sphinx/reStructuredText，所以也许我遗漏了一些明显的东西？

Answer 1

<body> 已存在于您的页面上，因此您需要将其从第一个页面中删除。

您还需要为 mapdiv 元素指定高度和宽度，例如，如下所示：

.. raw:: html

     <div id="mapdiv" style="height: 200px; width: 100%"></div>
     <script src="http://www.openlayers.org/api/OpenLayers.js"></script>
     <script>
     map = new OpenLayers.Map("mapdiv");
     map.addLayer(new OpenLayers.Layer.OSM());

     var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
       .transform(
         new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
         map.getProjectionObject() // to Spherical Mercator Projection
       );

     var zoom=16;

     var markers = new OpenLayers.Layer.Markers( "Markers" );
     map.addLayer(markers);

     markers.addMarker(new OpenLayers.Marker(lonLat));

     map.setCenter (lonLat, zoom);
     </script>

Answer 2

@anatoly 答案是正确的，但还有另一个步骤。

我在检查开发者工具时也发现了阻止加载混合活动内容错误（感谢@giacomo 向我指出了这一点），导致了这个答案线程：Why am I suddenly getting a "Blocked loading mixed active content" issue in Firefox? 这告诉我原因是 http 协议不安全。该协议可以完全删除。

所以最后的代码是：

.. raw:: html

     <div id="mapdiv" style="height: 200px; width: 100%"></div>
     <script src="//openlayers.org/api/OpenLayers.js"></script>
     <script>
     map = new OpenLayers.Map("mapdiv");
     map.addLayer(new OpenLayers.Layer.OSM());

     var lonLat = new OpenLayers.LonLat( -0.1279688 ,51.5077286 )
       .transform(
         new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
         map.getProjectionObject() // to Spherical Mercator Projection
       );

     var zoom=16;

     var markers = new OpenLayers.Layer.Markers( "Markers" );
     map.addLayer(markers);

     markers.addMarker(new OpenLayers.Marker(lonLat));

     map.setCenter (lonLat, zoom);
     </script>

将 OpenLayers 滑动地图嵌入到 Sphinx reStructuredText 页面中

Embedding an OpenLayers slippy map into Sphinx reStructuredText page

maps

restructuredtext

openlayers

python-sphinx

leaflet