谷歌地圖不顯示

我試圖在我的混合應用程序中包括谷歌地圖，我遇到了一個問題，其中功能正在運行，但谷歌地圖沒有顯示。谷歌地圖不顯示

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你的谷歌地圖的腳本是添加http：在SRC。 – Banik 2015-03-31 18:51:24

@Banik它仍然顯示相同的問題 – 2015-04-01 11:06:38

我能解決它，但它不顯示在Android設備 – 2015-04-02 09:08:56

你缺少的文件谷歌地圖調用中的http://。

這樣稱呼它：

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

來源

2015-04-02 12:22:30 aelor

den也沒有幫助 – 2015-04-02 12:23:24

謝謝！，這對我來說就像一個魅力。 – maltray 2016-09-28 00:21:48

謝謝幫助也.. – 2016-10-12 07:55:41

你檢查的run方法在app.js.請確保您有starter.controllers如扶養說有..

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

來源

2015-06-07 05:01:03

VAR選項= {超時：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 2017-04-15 11:34:50

請解釋你的答案 – Mazz 2017-04-15 12:05:38

谷歌地圖不顯示

回答

相關問題