地理位置 - 使用 Ionic 框架、AngularJS 和 Google API

Question

我们正在尝试在我们最新的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);
    });
  };
 });

Answer 1

when you find the current location of your phone first you find out the latitude and longitude.So First,Add the plugin your project 
1.cordova plugin add cordova-plugin-geolocation

2.module.controller('GeoCtrl', function($cordovaGeolocation,$http) {

  var posOptions = {timeout: 10000, enableHighAccuracy: false};
  $cordovaGeolocation
    .getCurrentPosition(posOptions)
    .then(function (position) {
      var lat  = position.coords.latitude //here you get latitude
      var long = position.coords.longitude //here you get the longitude
  $http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+lat+','+long+'&sensor=true').then(function(data){      $rootScope.CurrentLocation=data.data.results[0].formatted_address;//you get the current location here


        }, function(err) {
          // error
        });
    }, function(err) {
      // error
    });

}):

Answer 2

这是一个很好的例子。

Codepen link

.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(){

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

  };

});

我确实使用了谷歌地图指令，只是为了将所有内容都保存在 angular-land 中。

Answer 3

这是带有 Google 地图的 Ionic 应用的CodePen

---

angular.module('ionic.example', ['ionic'])

    .controller('MapCtrl', function($scope, $ionicLoading, $compile) {
      function initialize() {
        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()'>Click me!</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')
      };

    });