如何將mapbox.js添加到我的離子/科爾多瓦應用程序中？

我一直在努力獲得這個工作，並且我能得到的最多的結果就是沒有應用css的地圖。我一直無法找到如何做到這一點的任何好信息。如何將mapbox.js添加到我的離子/科爾多瓦應用程序中？

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <meta name="viewport" 
     content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
     <title></title> 

     <link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
     <link href='css/mapbox.css' rel='stylesheet'/> 
     <link href="css/style.css" rel="stylesheet"> 

     <script src="lib/ionic/js/ionic.bundle.js"></script> 
     <script src="cordova.js"></script> 
     <script src="js/app.js"></script> 
    </head> 

    <body ng-app="starter" class="platform-android platform-cordova platform-webview"> 

    <ion-pane> 
     <ion-header-bar class="bar-stable"> 
      <h1 class="title">Ionic Blank Starter</h1> 
     </ion-header-bar> 

     <ion-content ng-controller="MapCtrl"> 
      <div id='map'></div> 

     </ion-content> 
    </ion-pane> 
    <script src='js/mapbox.js'></script> 
</body>

angular.module('starter', ['ionic']) 

.run(function($ionicPlatform) { 
$ionicPlatform.ready(function() { 
if(window.cordova && window.cordova.plugins.Keyboard) { 

    cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); 

    cordova.plugins.Keyboard.disableScroll(true); 
} 
if(window.StatusBar) { 
    StatusBar.styleDefault(); 
} 
}); 
}) 

.controller('MapCtrl', function($scope) { 

L.mapbox.accessToken = 'pk.eyJ1IjoiYWFqIiwiYSI6ImYzMjM1Y2MzMTQ3OWFkNmMyMTAwNWYwOWIzNTAzYWZiIn0.sIg2X4e8zhXU5JoNf0JJ3w'; 

var southWest = L.latLng(40.712, -74.227), 
northEast = L.latLng(40.774, -74.125), 
bounds = L.latLngBounds(southWest, northEast); 

var map = L.mapbox.map('map', 'mapbox.streets', { 

maxBounds: bounds, 
maxZoom: 19, 
minZoom: 10 
}); 


map.fitBounds(bounds); 

});

當排除CSS文件，這是我得到：

用CSS文件，我得到一個空白屏幕。

來源

2016-01-16 user465001

我能夠從模擬器中爲此工作.apk。我認爲，這個問題是爲了使我在調用腳本

工作版本內嵌JS：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="viewport" 
     content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> 
<title></title> 

<link href="lib/ionic/css/ionic.css" rel="stylesheet"> 
<link href="css/style.css" rel="stylesheet"> 

<script src='js/mapbox.js'></script> 
<link href='css/mapbox.css' rel='stylesheet'/> 
<style> 
    body { margin:0; padding:0; } 
    #map { position:absolute; top:0; bottom:0; width:100%; } 
</style> 

<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above 
<link href="css/ionic.app.css" rel="stylesheet"> 
--> 

<!-- ionic/angularjs js --> 
<script src="lib/ionic/js/ionic.bundle.js"></script> 

<!-- cordova script (this will be a 404 during development) --> 
<script src="cordova.js"></script> 

<!-- your app's js --> 
<script src="js/app.js"></script> 
</head> 
<body ng-app="starter" class="platform-android platform-cordova platform-webview"> 

<ion-pane> 
    <ion-header-bar class="bar-stable"> 
    <h1 class="title">Map Test</h1> 
</ion-header-bar> 

<ion-content> 
    <div id='map'></div> 


</ion-content> 
</ion-pane> 
<script> 
    L.mapbox.accessToken = 'pk.eyJ1IjoiYWFqIiwiYSI6ImYzMjM1Y2MzMTQ3OWFkNmMyMTAwNWYwOWIzNTAzYWZiIn0.sIg2X4e8zhXU5JoNf0JJ3w'; 
     var map = L.mapbox.map('map', 
      'mapbox.streets', { 
       zoomControl: false 
        }).setView([44.6437138,-63.5854978], 11);

來源

2016-01-16 23:18:00 user465001

如何將mapbox.js添加到我的離子/科爾多瓦應用程序中？

回答

相關問題