0

我已经创建了一个 HTML 文件，它按照本教程使用传单显示地图。

http://build-failed.blogspot.co.uk/2012/11/zoomable-image-with-leaflet.html

我的HTML代码如下...

<!DOCTYPE html>
<html>
  <head>
    <title>eso1119a</title>
    <meta charset="utf-8"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.css" />
    <!--[if lte IE 8]>
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.ie.css" />
    <![endif]-->
    <script src="http://cdn.leafletjs.com/leaflet-0.6.4/leaflet.js"></script>
    <script>
      function init() {
        var mapMinZoom = 0;
        var mapMaxZoom = 3;
        var map = L.map('map', {
          maxZoom: mapMaxZoom,
          minZoom: mapMinZoom,
          crs: L.CRS.Simple
        }).setView([0, 0], mapMaxZoom);

        var mapBounds = new L.LatLngBounds(
            map.unproject([0, 1280], mapMaxZoom),
            map.unproject([1280, 0], mapMaxZoom));

        map.fitBounds(mapBounds);
        L.tileLayer('{z}/{x}/{y}.png', {
          minZoom: mapMinZoom, maxZoom: mapMaxZoom,
          bounds: mapBounds,
          attribution: 'Rendered with <a href="http://www.maptiler.com/">MapTiler</a>',
          noWrap: true          
        }).addTo(map);
      }
    </script>
    <style>
      html, body, #map { width:100%; height:100%; margin:0; padding:0; }
    </style>
  </head>
  <body onload="init()">
    <div id="map"></div>
  </body>
</html>

如何以与该用户相同的方式将地图嵌入到我的博客 (tumblr) 中？http://blog.thematicmapping.org/2013/06/showing-zoomify-images-with-leaflet.html

4

1 回答 1

1

您需要将带有MapTiler生成的可缩放图像的文件夹上传到虚拟主机。

如何使其可用的教程 - 使用 Dropbox 或其他服务可以免费托管：http: //www.maptiler.com/how-to/hosting/

（由于 Tumblr 不再支持静态文件托管，因此需要为地图提供不同的网络托管服务提供商......）。

完成此操作后，只需在 Tumblr 中创建一个新帖子，将帖子更改为“文本编辑器”并选择“HTML”并包含如下代码：

<iframe src="http://yourserver.com/path-to-your-folder/leaflet.html"
style="width: 100%; height: 450px;"></iframe>

请参阅此 Thumblr 示例帖子：

http://klokancz.tumblr.com/post/129075897775/maptiler-embedding-test

于 2015-09-14T15:06:52.287 回答