Geografischer Standort - Verwenden von Ionic Framework, AngularJS und Google API

Question

Wir versuchen, dieses Codepen in unserem neuesten Projekt Ionic Framework/AngularJS zu verwenden, und dieses Problem kann nicht erkannt werden.

Wir wollen in der Lage sein, klicken Sie auf "Find Us" und lassen Sie die Google Map Marker unseren aktuellen Standort anzeigen.

Wenn jemand sehen kann, wo wir falsch laufen, lass es uns wissen. Danke.

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

Hier ist ein gutes Beispiel dafür.

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

    }; 

}); 

Ich habe eine Richtlinie für Google Maps verwenden, einfach alles zu halten, in Winkelland.

Answer 2

ist hier ein CodePen eine ionische App mit 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 
    }); 

}):