Question

我只是将这些行添加到head.html内的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%; }

并将这些行转换为body部分内的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

好的，见下文。根据您发送的文件更新。以下仅对此处提到的文件进行更改：

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

Answer 2

此处至少有一件事是，您map_events提供的ID为#map，但有关如何设置地图样式的CSS规则为l1 。由于您还没有包含HTML，我不知道它是什么，但三个 - html，javascript和css - 将需要匹配。

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

2 个答案: