如何将传单地图嵌入到 html 页面？答案

【问题标题】：How to embed leaflet map to html page?如何将传单地图嵌入到 html 页面？
【发布时间】：2015-10-21 04:59:24
【问题描述】：

我是 web 开发的新手，我想在我的 html 页面中嵌入地图。

我该怎么做？

我正在使用从 QuantumGIS 生成的传单地图和 qgis2leaflet 插件。将来，我想在地图中显示一个代表人口分布的热图。

这是我的 html 代码：

<div class="widget span8">
        <div class="widget-header">
          <i class="icon-map-marker"></i>
          <h5>Map Visualization</h5>
          <div class="widget-buttons">
          </div>
        </div>
        <div class="widget-body clearfix">
          <div style="height:274px;" id="graph" class="widget-analytics-large"></div>
        </div>
      </div>
    </div>

【问题讨论】：

你有没有关注this的教程，我认为它涵盖了所有方面
是的，我按照该教程并成功创建了传单地图。现在，我想把传单地图放到我自己的 html 页面中。我怎么能这样做？ @muzaffar

标签： html dictionary web embed leaflet

【解决方案1】：

看看这里：http://leafletjs.com/examples/quick-start.html 这是一个示例页面：http://leafletjs.com/examples/quick-start-example.html

通常，您必须在正文中为您的地图添加一个占位符 div

<div id="my-custom-map" style="width: 600px; height: 400px"></div>

然后通过 Javascript API 创建传单地图：

var map = L.map('my-custom-map').setView([51.505, -0.09], 13);

L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6IjZjNmRjNzk3ZmE2MTcwOTEwMGY0MzU3YjUzOWFmNWZhIn0.Y8bhBaUMqFiPrDRW9hieoQ', {
    maxZoom: 18,
    attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
        '<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
        'Imagery © <a href="http://mapbox.com">Mapbox</a>',
    id: 'mapbox.streets'
}).addTo(map);

请注意，您正在使用元素的 id (my-custom-map) 在该 div 中创建传单地图

【讨论】：