小编Bil*_*age的帖子

使用 html2canvas 截屏 MapBox 创建黑色 jpg

我设法在硬盘上保存了使用 html2canvas 通过 Google Maps API 生成的地图的屏幕截图。我现在尝试使用 MapBox API 做同样的事情,但我在硬盘上得到的只是一张黑屏 jpg。

这是我的 HTML 代码:

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/main.css">
        <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.2/mapbox-gl.js'></script>
        <script src="js/html2canvas.js"></script>
    </head>

    <body onload="initialize()">
        <div id="map"></div>
        <script src="js/coordinates.js"></script>
    </body>
</html>
Run Code Online (Sandbox Code Playgroud)

使用此 CSS 全屏显示:

html { height: 100%; }
body { height: 100%; margin: 0px; padding: 0px; }
#map_canvas { width: 100%; height: 100%; }
Run Code Online (Sandbox Code Playgroud)

这个 JS 脚本用于创建地图并截取屏幕截图:

mapboxgl.accessToken = 'pk.eyJ1IjoiZ2luZ2FsYWJ2IiwiYSI6ImNpaWluNXIzbDAwMjB3ZG02c2hmNGhhMnUifQ.5SC9qnrK7eEdAtwv5Z0S_Q';

var latitude = 48.858565;
var longitude = 2.347198;

function initialize()
{
    var map = new mapboxgl.Map( …
Run Code Online (Sandbox Code Playgroud)

javascript html2canvas mapbox

6
推荐指数
2
解决办法
5899
查看次数

标签 统计

html2canvas ×1

javascript ×1

mapbox ×1