Mapbox地图未显示

Question

我在谷歌地图宣布政策变化后开始更换地图。然而，第一次尝试跟随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>

的CSS代码如下，以便完整呈现图片：

#googleMap {

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

也没有任何控制台信息。

- user2097141

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

Answer 2

我所做的就是将这行CSS代码添加到我的类或ID中：

#googleMap{position: absolute; top: 0; bottom: 0; width: 100%;}

- user10031694

Answer 3

这解决了我的问题：

npm uninstall react-map-gl

npm cache clean --force

npm install react-map-gl //to re-install react-map-gl.

- Baris Kayhan

---

目前你的回答不够清晰，请编辑并添加更多细节，以帮助其他人理解它如何回答问题。你可以在帮助中心找到有关如何撰写好答案的更多信息。 - Community

Answer 4

我也遇到了地图无法显示的问题。它只是以灰色框的形式出现，大小正确，但只是灰色的。我正在开发一个基于Web的JS应用程序。

测试用例：

• 在本地主机上没有问题。
• 在localhost:8080上没有问题。
• 在我的PC/Chrome上的mydomain上没有问题。
• 在旧版iPad上访问mydomain时没有问题。
• 在我的iPhone上，它根本就不能工作。

结果发现，当创建“访问令牌”时设置的MapBox“受限URL”可能需要进行调整。

我不得不添加“https://mydomain/”和“https://mydomain/index.html”，才能使其在所有客户端浏览器上正常工作。

- Sagan