mapbox 在 monaca.io 项目中不起作用

Question

我只是将这些行添加到头部部分的 index.html 中：

<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：

<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>

只有一个空白页面，而不是地图视图。你能帮帮我吗？

Answer 1

这里至少有一点值得注意的是，您提供给 L.mapbox.map 的 ID 是 map_events，但是关于如何设置地图样式的 CSS 规则是 #map。由于您没有包含 HTML，我不知道它是哪一个，但是这三个 html、javascript 和 css 需要匹配。

Answer 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;
    }
  });
});

工作codepen

mapbox 在 monaca.io 项目中不起作用

mapbox does not work in monaca.io project

cordova

leaflet

mapbox

onsen-ui

monaca