Geo-Location - Mit Ionic-Framework, AngularJS und Google-API

Versuchen wir mit dieser Codepen in unserem neuesten Ionic Framework/AngularJS Projekt und kann nicht scheinen, um die Abbildung dieses Problem aus.

Wir wollen zu können, klicken Sie auf "Finden" Uns " und haben die Google Map Marker Darstellung unserer aktuellen Lage.

Wenn jeder sehen kann was wir falsch machen, bitte lassen Sie 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);
    });
  };
 });

Die javascript/HTML-du gepostet hast funktioniert bei mir (zeigt die Markierung). Das Thema muss in den Rahmen.

InformationsquelleAutor | 2014-09-19

10

Ist hier ein gutes Beispiel.

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, nur, um alles in eckige-land.
- Warum navigator.geolocation.getCurrentPosition funktioniert nicht im android-emulator?
- Hast du eine Lösung für android?
- Es funktioniert, don ' T verwenden Sie cordova-plugin, sondern nur Fragen, für geolocation-Berechtigungen, dann wird android geben browser native geolocation-Dienst
- Wie um Erlaubnis Fragen, hybrid-app?
- Sie benötigen 1 plugin mindestens, sagen wir, Kamera, installieren Sie es von cordova plugin [name]. Es werden installiert im plugins-Ordner, öffnen Sie android.json und fügen Sie Berechtigungen, nachdem Sie die Kamera-Berechtigung
- Können Sie mir sagen, wie das hinzufügen Erlaubnis in meinem ionic-app
InformationsquelleAutor mhartington

Hier ist ein CodePen eines Ionic-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')
      };

    });

Bitte poste den relevanten code in der Frage selbst, nicht nur einen link zu einer externen Ressource.
In der CodePen Sie haben alle die app funktioniert, aber ich habe mein edit beantworten und Sie können sehen, die MapCtrl

InformationsquelleAutor Mati Tucci

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

}):

InformationsquelleAutor gattamaneni venkatanarasimham

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.