Карты Google, не показывающие

Я пытаюсь включить карты Google в свое гибридное приложение, и я сталкиваюсь с проблемой, когда функция работает, но карта google не отображается.Карты Google, не показывающие

search.html это страница, на которой карта должна быть указана, то здесь вариант расположения акций придумать, но после обмена тоже не показывает страницу enter image description here

<style> 
#map { 
    width: 100%; 
    height: 100%; 
} 

.scroll { 
    height: 100%; 
} 
</style> 
<ion-view title="Map"> 
    <ion-nav-buttons side="left"> 
    <button menu-toggle="left"class="button button-icon icon ion-navicon"></button> 
    </ion-nav-buttons> 
    <ion-content > 
     <div id="map" data-tap-disabled="true"></div> 
    </ion-content> 
<ion-view>

index.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 rel="stylesheet" type="text/css" href="css/flaticon/flaticon.css"> 
    <link rel="stylesheet" href="css/style.css"> 
    <link rel="stylesheet" href="css/app.css"> 

    <!-- 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/datepicker.js"></script> 
    <script src="//maps.googleapis.com/maps/api/js"></script> 
    <script src="js/app.js"></script> 
    <script src="js/controllers.js"></script> 


    </head> 

    <body ng-app="starter"> 
    <ion-nav-view></ion-nav-view> 
    </body> 
</html>

app.js это основной JS файл, в котором определены штаты и я не думаю, что я сделал какую-либо ошибку здесь

angular.module('starter', ['ionic', 'starter.controllers']) 
.config(function($stateProvider, $urlRouterProvider) { 
    $stateProvider 

    .state('app', { 
    url: "/app", 
    abstract: true, 
    templateUrl: "templates/menu.html", 
    controller: 'AppCtrl' 
    }) 

    .state('app.search', { 
    url: "/connect", 
    views: { 
     'menuContent': { 
     templateUrl: "templates/search.html", 
     controller: 'GpsCtrl' 
     } 
    } 
    }); 
$urlRouterProvider.otherwise('/app/main'); 
});

controllers.js здесь является частью контроллера определен, GpsCtrl для карты , страница становится открыта и просить разрешения местоположения на браузере, но тогда он не показывает карту

angular.module('starter.controllers', ['angular-datepicker']) 
.controller('MainCtrl', function($scope) { 

}) 
.controller('GpsCtrl', function($scope) { 

    ionic.Platform.ready(function() { 
     var myLatlng = new google.maps.LatLng(12.96,77.65); 

     var mapOptions = { 
      center: myLatlng, 
      zoom: 16, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 

     var map = new google.maps.Map(document.getElementById("map"), mapOptions); 

     navigator.geolocation.getCurrentPosition(function(pos) { 
      map.setCenter(new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude)); 
      var myLocation = new google.maps.Marker({ 
       position: new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude), 
       map: map, 
       title: "My Location" 
      }); 
     }); 

     $scope.map = map; 
    }); 

});

menu.html это файл для sidemenu

<ion-side-menus enable-menu-with-back-views="false"> 
    <ion-side-menu-content> 
    <ion-nav-bar class="bar-stable"> 
     <ion-nav-back-button> 
     </ion-nav-back-button> 

     <ion-nav-buttons side="left"> 
     <button class="button button-icon button-clear ion-navicon" menu-toggle="left"> 
     </button> 
     </ion-nav-buttons> 
    </ion-nav-bar> 
    <ion-nav-view name="menuContent"></ion-nav-view> 
    </ion-side-menu-content> 

    <ion-side-menu side="left"> 
    <ion-header-bar class="bar-stable"> 
     <h1 class="title">Left</h1> 
    </ion-header-bar> 
    <ion-content> 
     <ion-list> 
     <ion-item nav-clear menu-close ng-click="login()"> 
      Login 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/connect"> 
      Search 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/registration"> 
      Browse 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/main"> 
      Main 
     </ion-item> 
     <ion-item nav-clear menu-close href="#/app/resu"> 
      Result 
     </ion-item> 

     </ion-list> 
    </ion-content> 
    </ion-side-menu> 
</ion-side-menus>

источник

2015-03-31 Anshul Kalra

в вашем index.html ваш Google Map скрипт <сценарий SRC = "// maps.googleapis.com/maps/api/js"> добавить HTTP: в ИПВ. – Banik

@Banik его все еще показывает ту же проблему –

Я могу ее решить, но он не отображается на устройстве Android –

вам не хватает http:// в вызове Google Maps.

называют это так:

<script src="http://maps.googleapis.com/maps/api/js"></script>

источник

2015-04-02 12:22:30 aelor

den тоже не помогает –

Спасибо, это работало как прелесть для меня. – maltray

Спасибо также помощь. –

вы проверили метод запуска в app.js. Убедитесь, что у вас есть starter.controllers, как зависимость указано там ..

angular.module('starter',['ionic','starter.controllers']) <== add controller here 
.run(function($ionicPlatform) {......................

источник

2015-06-07 05:01:03

опции вар = {таймаут: 10000, enableHighAccuracy: истинно};

$cordovaGeolocation.getCurrentPosition(options).then(function (position) { 

    var latLng = new google.maps.LatLng(12.32719230000002, 76.73288185390626); 

    var mapOptions = { 
     center: latLng, 
     zoom: 10, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    $scope.map = new google.maps.Map(document.getElementById("map"), mapOptions); 
    google.maps.event.addListenerOnce($scope.map, 'idle', function() { 

     var marker = new google.maps.Marker({ 
      map: $scope.map, 
      animation: google.maps.Animation.DROP, 
      position: latLng 
     }); 

     var infoWindow = new google.maps.InfoWindow({ 
      content: "Here I am!" 
     }); 

     google.maps.event.addListener(marker, 'click', function() { 
      infoWindow.open($scope.map, marker); 
     }); 

    }); 
}, function (error) { 
    console.log("Could not get location"); 
});

источник

2017-04-15 11:34:19 yousuf

попробуйте это в своем контроллере – yousuf

, пожалуйста, объясните свой ответ – Mazz

Карты Google, не показывающие

ответ

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