[英]How to embed leaflet map to html page?
我是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>
在这里看看: 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 © <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中创建传单地图
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.