Question

我一直在努力让这个工作，我得到的最多的结果是没有应用css的地图。我一直无法找到有关如何做到这一点的任何好消息。

<!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文件，我得到一个空白屏幕。

Answer 1

我能够从模拟器中获取一个工作.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);

如何将mapbox.js添加到我的ionic / cordova应用程序？

1 个答案: