我使用Openlayers 3來做到這一點。由于您遇到安全問題，至少我嘗試過(不能使用html2canvas)(在文檔中說您無法呈現(xiàn)iframe)。這是我的代碼，希望對你有所幫助。

HTML

的Javascript

功能drawMap (){

變種地圖=新ol.Map({

層：[新ol.layer.Tile({源：新ol.sourc e.OSM()})]，

目標： '地圖'，

控制：ol.control.defaults({

attributionOptions：/ ** @type {olx.control.AttributionOptions} * /({

可折疊：假

})

})，

視圖：新ol.View({

中心：ol.proj.transform([geografic.longitud，geografic。緯度]， 'EPSG：4326'， 'EPSG：900913')，

變焦：8

})

});

var exportPNGElement = document.getElementById('export-png');

exportPNGElement.addEventListener( '點擊'，函數(shù)(E){

map.once( 'postcompose'，函數(shù)(事件){

變種帆布= event.context .canvas;

window.open(canvas.toDataURL( '圖像/ PNG'));

});

map.renderSync();

}，false);

}

總結(jié)

以上是生活随笔為你收集整理的html2canvas导出地图,Leaflet OpenStreetMap使用html2canvas使用地图标记导出图像的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。