Lokalizacja geograficzna - korzystanie z Ionic Framework, AngularJS i Google API

Question

Staramy się używać tego Codepen w naszym ostatnim projekcie Ionic Framework/ i nie możemy tego problemu rozwiązać.

Chcemy mieć możliwość kliknięcia przycisku "Znajdź nas" i wyświetlenia naszej bieżącej lokalizacji pod numerem Google Map Marker.

Jeśli ktokolwiek może zobaczyć, gdzie źle idziemy, daj nam znać. Dziękuję.

// 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

Tutaj jest dobrym tego przykładem.

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

    }; 

}); 

zrobiłem użyć dyrektywy do google maps, żeby utrzymać wszystko w kątowym-land.

Answer 2

Oto CodePen z aplikacji Ionic z Google Maps

---

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') 
     }; 

    }); 

Answer 3

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

}):