Question

我一直在尝试用地图主动运行侧面菜单，但屏幕一直变白。我需要有人告诉我它究竟出了什么问题。我该如何解决？

<!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()
  }
})

Answer 1

我终于找到了解决方案。问题是google maps稳定版插件无效。

在命令行中尝试使用此命令：

cordova插件添加https://github.com/phonegap-googlemaps-plugin/cordova-plugin-googlemaps - 变量API_KEY_FOR_ANDROID =“YOUR_ANDROID_API_KEY_IS_HERE” - 变量API_KEY_FOR_IOS =“YOUR_IOS_API_KEY_IS_HERE”

另外，请确保在Android和ios中同时签署.apk文件以便对代码进行签名，在终端if (!preg_match('/\.mil$/', $email) { $errors[] = "Invalid Email Address";` }中输入以便在两个设备中正确显示地图。

Ionic sidemenu崩溃了地图

1 个答案: