Карта Mapbox не отображается - PullRequest
0 голосов
/ 04 июня 2018

Я начал заменять карты 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>

А вот CSS для div, чтобы завершить рисунок:

#googleMap {

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

Также нет консольных сообщений.

1 Ответ

0 голосов
/ 05 июня 2018

Решено!В отличие от 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);

Загрузка намного медленнеечем с Google, хотя документация менее ясна.

...