地理位置 – 使用Ionic Framework,AngularJS和Google API

我们正在尝试在最新的 Ionic Framework/ AngularJS项目中使用这个 Codepen,似乎无法解决这个问题.

我们希望能够点击“查找我们”并让Google Map Marker显示我们当前的位置.

如果有人能看到我们出错的地方,请告诉我们.
谢谢.

// Google Map
.controller('MapCtrl',function($scope,$ionicLoading,$compile) {
  function initialise() {   
    var myLatlng = new google.maps.LatLng(53.068165,-4.076803);
    var mapOptions = {
        zoom: 15,center: myLatlng,mapTypeId: google.maps.MapTypeId.ROADMAP,}
    var map = new google.maps.Map(document.getElementById('map'),mapOptions);
    var marker = new google.maps.Marker({
      position: myLatlng,map: map,});
    $scope.map = map;    
  }
  google.maps.event.addDomListener(window,'load',initialise);
  $scope.centerOnMe = function() {
    if(!$scope.map) {
      return;
    }
    $scope.loading = $ionicLoading.show({
      showBackdrop: true
    });
    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);
    });
  };
 });

这是一个很好的例子.

Codepen link

.controller('MarkerRemoveCtrl',$ionicLoading) {

  $scope.positions = [{
    lat: 43.07493,lng: -89.381388
  }];

  $scope.$on('mapInitialized',function(event,map) {
    $scope.map = map;
  });

  $scope.centerOnMe= function(){

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

  };

});

我确实使用谷歌地图的指令,只是为了保持角落土地的一切.