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

也没有控制台消息。

Answer 1

解决了！与 Google [纬度、经度] 不同，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);

不过，加载速度比 Google 慢得多，而且文档不太清晰。