mapbox не работает в проекте monaca.io

Я просто добавил эти строки в index.html внутри раздела head:

<script src="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.js"></script>
<link href="https://api.mapbox.com/mapbox.js/v2.2.1/mapbox.css" rel="stylesheet" />

и эти строки в style.css:

 body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }

и эти строки в page1.html внутри раздела body:

<div id="map_events"> </div>
<script>
        L.mapbox.accessToken = "pk.eyJ1Ijoic2FyaXl1eiIsImEiOiJ2OXNOZUl3In0.jUGJ37Gsx4aHML7aEd1TvA";
        var map = L.mapbox.map("map_events", "sariyuz.na1d3nml").setView([39, 32], 10);
</script>

Там есть только пустая страница, где вместо просмотра карты. Не могли бы вы помочь мне?

Источник

2 ответа

Решение

Хорошо, смотрите ниже. ОБНОВЛЕНО на основе файлов, которые вы отправили. Внесите изменения ниже только в файлы, упомянутые здесь:

index.html:

<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
   <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">
  <script src="components/loader.js"></script>
  <link rel="stylesheet" href="components/loader.css">
  <link rel="stylesheet" href="css/style.css">
  <link href='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.css' rel='stylesheet' />
  <script>
    ons.bootstrap();
  </script>
 </head>
 <body>
  <ons-sliding-menu var="app.slidingMenu" menu-page="menu.html" main-page="page1.html" side="left" type="overlay" max-slide-distance="200px">
  </ons-sliding-menu>
 </body>
 <script src='https://api.mapbox.com/mapbox.js/v2.2.2/mapbox.js'></script>
 <script src="js/app.js"></script>
</html>

menu.html:

<ons-page style="background-color: white">
<ons-list>
    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page1.html', {closeMenu: true});setPage(1)">
        <i class="fa fa-home fa-lg" style="color: #666"></i>
        &nbsp; Page 1
    </ons-list-item>
    <ons-list-item
        modifier="tappable" class="list__item__line-height"
        onclick="app.slidingMenu.setMainPage('page2.html', {closeMenu: true});setPage(2)">
        <i class="fa fa-gear fa-lg" style="color: #666"></i>
        &nbsp; Page 2
    </ons-list-item>
</ons-list>
</ons-page>

Создайте папку с именем js и внутри создайте файл с именем app.js:

var map;    

function initMap(){
  map = L.map('map_canvas', {
    center: [37.779584,-122.416910],
    zoom: 10,
    zoomControl: false
  });
  L.tileLayer('http://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=pk.eyJ1Ijoic2FyaXl1eiIsImEiOiJ2OXNOZUl3In0.jUGJ37Gsx4aHML7aEd1TvA', {
    attribution: '&copy; OpenStreetMap,  Imagery © Mapbox',
    maxZoom: 12,
    minZoom:7,
  }).addTo(map);  
}
var pageid = 1;
function setPage(currentpage){
   pageid = currentpage;
}

ons.ready(function() {
   app.slidingMenu.on('postclose', function() {
    console.log('postclose');
    switch (pageid){
    case 1:
        //This page does not contain the map
        break;
    case 2:
      initMap();
      break;
    }
  });
});

рабочий код

Источник

По крайней мере, одна вещь, которая выглядит здесь, заключается в том, что идентификатор, который вы предоставляете L.mapbox.map является map_events, но правило CSS для стиля карты #map, Поскольку вы не включили HTML, я не знаю, какой это, но три - html, javascript и css - должны совпадать.

Источник
Другие вопросы по тегам