Mapbox 地图不显示

Question

在他们宣布更改政策后，我已经开始更换 Google 地图。然而，第一次尝试遵循 Mapbox 示例并没有渲染地图——只有带有 Mapbox 徽标和信息图标的容器是可见的。任何想法可能有什么问题？该地图在 Chrome 和 Firefox 中均未显示，因此这不是浏览器问题。 Mapbox 自己的示例在两者中呈现并且我的访问令牌有效。我也很乐意考虑使用替代 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>

这是创建地图的实际代码：

 <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%;
 }

也没有控制台消息。

原文由 user2097141 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

解决了！与 Google [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);

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

原文由 user2097141 发布，翻译遵循 CC BY-SA 4.0 许可协议