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

【问题标题】：mapbox does not work in monaca.io projectmapbox 在 monaca.io 项目中不起作用
【发布时间】：2015-08-30 05:07:32
【问题描述】：

我只是将这些行添加到 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正文部分：

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

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

【问题讨论】：

您的应用程序是 Cordova 应用程序..所以您是否将 mapbox 连接列入白名单（使用白名单插件）？您是否在 html 文件中添加了内容安全策略元标记？阅读 Cordova 文档，尤其是白名单插件。调试过程中是否遇到任何错误？
我的meta标签如下：
配置设置中允许的 URL 设置为 *
您缺少内容安全策略元标记。请参阅我的答案here，这与 Google 地图类似，但适用于 Google 地图。还要检查答案中的链接。您必须根据需要设置此元标记。在我的项目中，我使用 Mapbox 磁贴加载传单库，并且在我的 HTML 文件中有这个元标记：<meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">。如果它对你有帮助，请告诉我将其发布为答案

标签： cordova leaflet mapbox onsen-ui monaca

【解决方案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

【讨论】：

感谢您的关心，但很抱歉我无法工作。特别是我不知道在哪里替换 ons.ready 部分。我尝试了几个地方来替换它，但没有一个有效。我正在为 IDE 使用 monaca.io，并且我创建了一个完整的“onsenui 滑动页面”模板项目。然后我已经为你导出了。
drive.google.com/file/d/0B4f-8iqrvR4CYkZMQ1Vod0ktczg/… 请您对这些项目文件（index.html、menu.html、page1.html、page2.html 和其他 js 库）实施以下 mapbox 示例。 mapbox.com/mapbox.js/example/v1.0.0/leaflet-locatecontrol 我还希望初始页面是 page1.html，其地图视图会在应用启动时自动定位用户位置。
我编辑了我的答案，为您提供了一个工作起点。要查找位置，您应该使用geolocation 插件。
谢谢你，Jc，它就像一个魅力。我所做的唯一修复是这一行：“" 。此行导致“拒绝加载样式表'api.mapbox.com/mapbox.js/v.2.2.2/mapbox.css'，因为它违反了以下内容安全策略指令：“style-src'self''unsafe-inline”。错误。
Js，我只想 page1 是应用程序的初始页面。我希望它在我运行应用程序后立即自动打开。我尝试了很多东西，但我做不到。你能看一下吗？

【解决方案2】：

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

【讨论】：

非常感谢，我已经修复了那个 css 的东西，但它是同样的问题。我认为问题出在 onsen.ui 或 monaca..