Angularjs 将google地图api插入到ionic模板页面_Angularjs_Google Maps

Angularjs 将google地图api插入到ionic模板页面

angularjs google-maps

Angularjs 将google地图api插入到ionic模板页面,angularjs,google-maps,Angularjs,Google Maps,我是爱奥尼亚的新手，但我会尝试将我的旧应用程序转换成这个强大的框架。我将尝试使用GoogleMapsAPI加载到模板页面中这是我的app.js angular.module('starter', ['ionic', 'starter.controllers']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { if(window.cordova && window.cordova.

我是爱奥尼亚的新手，但我会尝试将我的旧应用程序转换成这个强大的框架。我将尝试使用GoogleMapsAPI加载到模板页面中

这是我的app.js

angular.module('starter', ['ionic', 'starter.controllers'])
.run(function($ionicPlatform) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
  });
})

.config(function($stateProvider, $urlRouterProvider) {
  $stateProvider

    .state('app', {
      url: "/app",
      abstract: true,
      templateUrl: "templates/menu.html",
      controller: 'AppCtrl'
    })
    .state('app.home', {
      url: "/home",
      views: {
        'menuContent' :{
          templateUrl: "templates/home.html"
        }
      }
    })
    .state('app.mappa', {
      url: "/mappa",
      views: {
        'menuContent' :{
          templateUrl: "templates/mappa.html",
          controller: 'MarkerRemoveCtrl'
        }
      }
    })
    .state('app.search', {
      url: "/search",
      views: {
        'menuContent' :{
          templateUrl: "templates/search.html"
        }
      }
    })
    .state('app.registrati', {
      url: "/registrati",
      views: {
        'menuContent' :{
          templateUrl: "templates/registrati.html"
        }
      }
    })

    .state('app.browse', {
      url: "/browse",
      views: {
        'menuContent' :{
          templateUrl: "templates/browse.html"
        }
      }
    })
    .state('app.playlists', {
      url: "/playlists",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlists.html",
          controller: 'PlaylistsCtrl'
        }
      }
    })
    .state('app.single', {
      url: "/playlists/:playlistId",
      views: {
        'menuContent' :{
          templateUrl: "templates/playlist.html",
          controller: 'PlaylistCtrl'
        }
      }
    })
    .state('app.prova', {
      url: "/prova",
      views: {
        'menuContent' :{
          templateUrl: "templates/prova.html"
        }
      }
    });
  $urlRouterProvider.otherwise('/app/home');
});

这是我的controller.js

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

.controller('AppCtrl', function($scope, $ionicModal, $timeout) {
  $scope.loginData = {};
  $ionicModal.fromTemplateUrl('templates/login.html', {

  scope: $scope
  }).then(function(modal) {
    $scope.modal = modal;
  });

  $scope.closeLogin = function() {
    $scope.modal.hide();
  };

  $scope.login = function() {
    $scope.modal.show();
  };

  $scope.doLogin = function() {
    console.log('Eseguo la login', $scope.loginData);

    $timeout(function() {
      $scope.closeLogin();
    }, 1000);
  };
})

.controller('PlaylistsCtrl', function($scope) {
  $scope.playlists = [
    { title: 'Reggae', id: 1 },
    { title: 'Chill', id: 2 },
    { title: 'Dubstep', id: 3 },
    { title: 'Indie', id: 4 },
    { title: 'Rap', id: 5 },
    { title: 'Cowbell', id: 6 }
  ];
})

.controller('PlaylistCtrl', function($scope, $stateParams) {
})

.controller('MarkerRemoveCtrl', function($scope, $ionicLoading) {
  $scope.positions = [{
    lat: 43.07493,
    lng: -89.381388
  }];
  $scope.$on('mapInitialized', function(event, map) {
    $scope.map = map;
  });
  $scope.centerOnMe= function(){
  $scope.positions = [];

    $ionicLoading.show({
      template: 'Loading...'
    });
    navigator.geolocation.getCurrentPosition(function(position) {
      var pos = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
      $scope.positions.push({lat: pos.k,lng: pos.B});
      console.log(pos);
      $scope.map.setCenter(pos);
      $ionicLoading.hide();
    });
  };
});

这是我的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="css/ionic.app.css" rel="stylesheet">
<link href="css/app.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="http://maps.google.com/maps/api/js"></script>
<script src="http://rawgit.com/allenhwkim/angularjs-google-maps/master/build/scripts/ng-map.min.js"></script>
</head>
<body ng-app="starter">
<ion-nav-view></ion-nav-view>
</body>
</html>

正如您所理解的，当我单击mappa按钮时，我会打开mappa.html模板并加载地图

mappa.html

<ion-view ng-controller="MarkerRemoveCtrl">
<ion-content scroll="false">
  <div class="mapWrap"  data-tap-disabled="true">
    <map center="43.07493,-89.381388" zoom="15">
      <!-- ngRepeat: pos in positions -->
      <marker ng-repeat=" pos in positions" position="{{pos.lat}},{{pos.lng}}"></marker>
    </map>
  </div>
</ion-content>
</ion-view>

但是什么也没发生！我将尝试将mappa.html代码放入索引中，一切正常

问题是: 可以在其他模板页面中加载地图，还是仅在主页中加载？那怎么做呢

更新解决方案

好的，我解决了我的问题，所以只需调用init

这是maps.html

<ion-view title="MAPPA" ng-init="init()">
  <ion-nav-bar class="bar-energized"></ion-nav-bar>
  <ion-content>
    <div id="map" data-tap-disabled="true"></div>
  </ion-content>
  <ion-footer-bar class="bar-dark"> <a ng-click="centerOnMe()" class="button button-icon icon ion-navigate">Dove mi trovo</a> </ion-footer-bar>
</ion-view>

这是控制器：

//MAPPE
.controller('mapCtrl', function($scope, $ionicLoading, $compile) { 
      $scope.init = function() {
        var myLatlng = new google.maps.LatLng(43.07493,-89.381388);
        var mapOptions = {
          center: myLatlng,
          zoom: 16,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("map"),
            mapOptions);

        //Marker + infowindow + angularjs compiled ng-click
        var contentString = "<div><a ng-click='clickTest()'>Clicca qui!</a></div>";
        var compiled = $compile(contentString)($scope);
        var infowindow = new google.maps.InfoWindow({
          content: compiled[0]
        });
        var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Uluru (Ayers Rock)'
        });
        google.maps.event.addListener(marker, 'click', function() {
          infowindow.open(map,marker);
        });
        $scope.map = map;
    };
    // google.maps.event.addDomListener(window, 'load', initialize);
    $scope.centerOnMe = function() {
        if(!$scope.map) {return;}

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

        navigator.geolocation.getCurrentPosition(function(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);
        });
    };
    $scope.clickTest = function() {
        alert('Example of infowindow with ng-click')
    };
})

对我来说，工作很好，当点击找到正确的位置，并显示在地图上！

谢谢

正如我看到的，您正在使用Google Maps JavaScript库，如果您使用的是v3 API，那么您需要指定API键，如果不是，那么您可能希望尝试使用PhoneGap插件，以在移动设备上更快地加载本机Google Maps

你发布的代码在我看来有点奇怪，你可能想在这里发布更简单的版本。但是我在你的代码中没有看到你在mapWrap div中设置要加载的地图，你一定要这样做。

FYI：这个插件可以帮助你将本地Google地图嵌入到你的应用程序中。许多爱奥尼亚框架用户使用这个插件。