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

我要做的只是将这行CSS添加到我的类或id中；

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

Answer 2

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

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

Answer 3

我也有一个问题，就是地图没有显示出来。它显示为一个灰色框，大小合适，但只是灰色。我正在开发基于Web的JS应用程序。

测试用例：

在localhost上很好。
在localhost：8080上很好。
在使用PC / Chrome的mydomain上很好。
在mydomain上，使用旧的iPad可以很好地访问它。
在mydomain上，使用我的iPhone不能正常运行。

找出在创建“访问令牌”时设置的MapBox“受限制的网址”。

我必须同时添加“ https：// mydomain /”和“ https：//mydomain/index.html”，才能在所有客户端浏览器上正常工作。

Mapbox地图未显示

3 个答案: