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

Я просто добавил эти строки в index.html внутри головки секции:MapBox не работает в monaca.io проекта

<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%; }

и эти строки к странице1.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>

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

источник

2015-08-30 YellowFace

Ваше приложение - это Cordova. У вас есть ссылки на whiteListed mapbox (с использованием плагина Whitelist)? Вы добавили метатег политики безопасности контента в свой html-файл? прочитайте документы Кордовы и особенно плагин с белым списком. Вы получаете какие-либо ошибки во время отладки? – JcDenton86

Мои метатеги заключаются в следующем: – YellowFace

– YellowFace

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

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

работа ing codepen

источник

2015-09-03 06:18:00 JcDenton86

Благодарим вас за беспокойство, но я сожалею, что не могу это обработать. Особенно я не мог понять, где заменить раздел. Я попробовал несколько мест, чтобы заменить его, но не работало. Я использую monaca.io для IDE, и я создал полностью работающий шаблонный проект «onsenui slide page». Затем я экспортировал его для вас. – YellowFace

https://drive.google.com/file/d/0B4f-8iqrvR4CYkZMQ1Vod0ktczg/view?usp=sharing. Вы любезно реализуете этот следующий пример mapbox для этих файлов проекта (index.html, menu.html, page1.html, page2 .html и дополнительные js-библиотеки). https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-locatecontrol/ Я также хочу, чтобы начальная страница была page1.html с отображением карты, автоматически определяющим позицию пользователя при запуске приложения. – YellowFace

Я отредактировал свой ответ, давая вам начальную рабочую точку. Чтобы найти местоположение, вы должны использовать плагин [geolocation] (https://www.npmjs.com/package/cordova-plugin-geolocation). – JcDenton86

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

источник

2015-08-30 14:09:42 tmcw

Большое спасибо, я исправил эту вещь css, но это та же проблема. Я думаю, проблема связана с onsen.ui или monaca. – YellowFace

ответ

Смежные вопросы