2016-08-25 55 views
0

我一直尝试一遍一遍地积极运行与地图sidemenu,但它的屏幕不断变成白色。我需要有人告诉我它到底有什么问题。我如何解决它?离子sidemenu崩溃地图

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

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

    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAs27t8rz7neJCwe6xNdWTPLMr5QmR-8Cg"></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> 
    <script src="js/controllers.js"></script> 
    <script src="js/directives.js"></script> 
    </head> 



    <body ng-app="starter" ng-controller="MapCtrl"> 
    <ion-header-bar class="bar-calm"> 
     <button class="button button-icon icon ion-navicon" ng-click = "toggleLeft()"></button> 
     <h1 class="title">Map</h1> 
     <button class="button button-clear button-positive">Edit</button> 
    </ion-header-bar> 
    <!--trabajando con el sidemenu--> 
    <ion-side-menu> 
     <ion-side-menu-content> 
      <ion-side-menu side="left"> 
       <ion-list> 
        <ion-item>HOME</ion-item> 
       </ion-list> 
       <ion-list> 
        <ion-item>BRYAN</ion-item> 
       </ion-list> 
       <ion-list> 
        <ion-item>KORA</ion-item> 
       </ion-list> 

      </ion-side-menu> 
     </ion-side-menu-content> 
    </ion-side-menu> 
    <ion-content scroll="false"> 
     <map on-create="mapCreated(map)" ng-init="initMap()"></map> 
    </ion-content> 

    <ion-footer-bar class="bar-calm"> 
     <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate"></a> 
    </ion-footer-bar> 
    </body> 
</html> 

这是controller.js

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

.controller('MapCtrl', function($scope, $ionicLoading, $ionicSideMenuDelegate) { 
    $scope.left = function() { 
    $ionicSideMenuDelegate.left(); 
    } 
    $scope.mapCreated = function(map) { 
    $scope.map = map; 
    }; 

    $scope.centerOnMe = function() { 
    console.log("Centering"); 
    if (!$scope.map) { 
     return; 
    } 

    $scope.loading = $ionicLoading.show({ 
     content: 'Getting current location...', 
     showBackdrop: false 
    }); 

    navigator.geolocation.getCurrentPosition(function (pos) { 
     console.log('Got pos', pos); 
     $scope.map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
     $scope.loading.hide(); 
    }, function (error) { 
     alert('Unable to get location: ' + error.message); 
    }); 
    }; 
}); 

// 
.controller('MapCtrl', function($scope, $ionicSideMenuDelegate){ 
    $scope.toggleLeft = function(){ 
    $ionicSideMenuDelegate.toggleLeft() 
    } 
}) 
+0

其他文章不帮助! –

+0

控制台中是否有错误? – Anuj

回答

0

我终于找到了解决办法。问题是谷歌地图稳定版插件无法正常工作。

尝试中,而不是命令行这一个:

科尔多瓦插件添加https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps --variable API_KEY_FOR_ANDROID = “YOUR_ANDROID_API_KEY_IS_HERE” --variable API_KEY_FOR_IOS = “YOUR_IOS_API_KEY_IS_HERE”

另外,还要确保你签两个.apk文件在android和ios中为了签署代码,请输入终端--codeSignIdentity,以便在两个设备中正确显示地图。