Question

我正在尝试在我的混合应用程序中包含谷歌地图，我遇到了一个问题，该功能正在运行，但谷歌地图没有显示。

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>

Answer 1

您错过了Google地图调用中的http://。

这样称呼：

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

Answer 2

你检查了app.js中的run方法吗？确保你有starter.controllers作为依赖声明..

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

Answer 3

var options = {timeout：10000，enableHighAccuracy：true};

$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");
});

谷歌地图没有显示

3 个答案: