javascript - Mapbox map 不显示

Question

在他们宣布改变他们的政策后，我开始更换谷歌地图。
然而，第一次尝试使用 Mapbox 示例并没有渲染 map - 只有带有 Mapbox Logo 和信息图标的容器可见。
有什么想法可能是错的吗？
该 map 在 Chrome 和 Firefox 中均未显示，因此这不是浏览器问题。 Mapbox 自己的示例在两者中都呈现，并且我的访问 token 是有效的。
如果它得到这个论坛的大力支持，我也很乐意考虑替代 API。

这些行被添加到头部的底部:

<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
      <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>

这是创建 map 的实际代码:

<div id = "googleMap"> </div>
   <script>
    mapboxgl.accessToken = '<MyAccessToken>';

    var monument = [51.5220163 , -0.1404545];
    var map = new mapboxgl.Map({
    container: 'googleMap',
    style: 'mapbox://styles/mapbox/light-v9',
    center: monument,
    zoom: 16
});
</script>

这是 div 完成图片的 CSS:

#googleMap {

    width: 49%;
    margin-top: 100px;
    margin-left: 50%;
    margin-bottom: 10px;
    max-height: 60%;
 }

也没有控制台消息。

Answer 1

解决了!
不像谷歌 [Latitude, Longitude] Mapbox 使用 [lng, lat]。

如果你想添加一个简单的标记，完整的工作代码是:

mapboxgl.accessToken = 'MyAccessToken';

var map = new mapboxgl.Map({
    container: 'googleMap', // container id
    style: 'mapbox://styles/mapbox/streets-v9', // stylesheet location
    center: [-0.1404545, 51.5220163], // starting position [lng, lat]
    zoom: 16 // starting zoom
});

  // create the marker
    new mapboxgl.Marker()
    .setLngLat([-0.1404545, 51.5220163])
    .addTo(map);

加载速度比谷歌慢得多，文档也不太清楚。