Mapbox "；“显示地图”；示例isn'；不显示任何地图_Mapbox_Mapbox Gl Js_Mapbox Gl

Mapbox "；“显示地图”；示例isn'；不显示任何地图

mapbox

Mapbox "；“显示地图”；示例isn'；不显示任何地图,mapbox,mapbox-gl-js,mapbox-gl,Mapbox,Mapbox Gl Js,Mapbox Gl,我试着按照这里的说明来做：我的代码如下所示，如示例所示： <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Display a map</title> <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scal

我试着按照这里的说明来做：

我的代码如下所示，如示例所示：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Display a map</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.12.0/mapbox-gl.css" rel="stylesheet" />
<style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%;}
</style>
</head>
<body>

<div id="map"></div>
<script>
        mapboxgl.accessToken = 'MY_TOKEN';
    var map = new mapboxgl.Map({
        container: 'map', // container id
        style: 'mapbox://styles/ericgithinji/ckfchv1sr0u581amw703zg3jh',//it also fails when I use one of the public styles
        center: [-74.5, 40], // starting position [lng, lat]
        zoom: 9 // starting zoom
    });
</script>

</body>
</html>


显示地图
正文{margin:0；padding:0；}
#映射{位置：绝对；顶部：0；底部：0；宽度：100%；}
mapboxgl.accessToken='MY_TOKEN'；
var map=new mapboxgl.map({
容器：'映射'，//容器id
风格：'mapbox://styles/ericgithinji/ckfchv1sr0u581amw703zg3jh“，//当我使用一种公共样式时，它也会失败
中心：[-74.5,40]，//起始位置[lng，lat]
缩放：9//开始缩放
});

地图的div不显示任何内容，即我得到一个空白网页。我已经完成了这里的style_id、tileset id和access token测试，它们都可以工作：

我不知道有什么问题。如果有帮助的话，我的Index.html是本地托管在Ubuntu Apache2服务器上的。

我犯了两个错误：1-使用我的秘密令牌而不是我的公共令牌；2-没有首先为自己生成样式（与示例中的默认样式不兼容）