Google MapsでAngular Geolocationディレクティブを使用するにはどうすればよいですか？

私は、場所を取得するために角度ジオロケーションを使用しています。その帰りの緯度と経度。私はこの緯度と経度を使って地図を表示したい。また、5kmの円を表示したい私のコードindex.htmlをGoogle MapsでAngular Geolocationディレクティブを使用するにはどうすればよいですか？

<html> 
 
<head> 
 
    <title>ngGeolocation</title> 
 
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.js"></script> 
 
    <script src="./ngGeolocation.js"></script> 
 
    <script src="./index.js"></script> 
 
</head> 
 
<body ng-app="geolocationDemo"> 
 
    <div ng-controller="AppController"> 
 
    <h1>Basic (fetch once)</h1> 
 
    Latitude: {{location.coords.latitude}} 
 

 
    <br /> 
 
    Longitude: {{location.coords.longitude}} 
 
    <br /> 
 
    
 
    </div> 
 
    
 
</body> 
 
</html>

Index.js

angular 
 
    .module('geolocationDemo', ['ngGeolocation']) 
 
    .controller('AppController', function($scope, $geolocation){ 
 

 
    $scope.$geolocation = $geolocation 
 

 
    // basic usage 
 
    $geolocation.getCurrentPosition().then(function(location) { 
 
     $scope.location = location 
 
    }); 
 

 

 
    // regular updates 
 
    $geolocation.watchPosition({ 
 
     timeout: 60000, 
 
     maximumAge: 2, 
 
     enableHighAccuracy: true 
 
    }); 
 
    $scope.coords = $geolocation.position.coords; // this is regularly updated 
 
    $scope.error = $geolocation.position.error; // this becomes truthy, and has 'code' and 'message' if an error occurs 
 
    //console.log($scope.coords); 
 
    });

n個のを見てみましょうgGeolocation.js私はそれを行うことができますどのように

angular 
 
    .module('ngGeolocation', []) 
 
    .factory('$geolocation', ['$rootScope', '$window', '$q', function($rootScope, $window, $q) { 
 

 
     function supported() { 
 
      return 'geolocation' in $window.navigator; 
 
     } 
 

 
     var retVal = { 
 
      getCurrentPosition: function(options) { 
 
       var deferred = $q.defer(); 
 
       if(supported()) { 
 
        $window.navigator.geolocation.getCurrentPosition(
 
         function(position) { 
 
          $rootScope.$apply(function() { 
 
           retVal.position.coords = position.coords; 
 

 
           
 
           deferred.resolve(position); 
 

 
           
 
          }); 
 
         }, 
 

 

 
         function(error) { 
 
          $rootScope.$apply(function() { 
 
           deferred.reject({error: error}); 
 
          }); 
 
         }, options); 
 
       } else { 
 
        deferred.reject({error: { 
 
         code: 2, 
 
         message: 'This web browser does not support HTML5 Geolocation' 
 
        }}); 
 
       } 
 
       return deferred.promise; 
 
      }, 
 

 

 

 
      watchPosition: function(options) { 
 
       if(supported()) { 
 
        if(!this.watchId) { 
 
         this.watchId = $window.navigator.geolocation.watchPosition(
 
          function(position) { 
 
           $rootScope.$apply(function() { 
 
            retVal.position.coords = position.coords; 
 
            delete retVal.position.error; 
 
            $rootScope.$broadcast('$geolocation.position.changed', position); 
 
           }); 
 
          }, 
 
          function(error) { 
 
           $rootScope.$apply(function() { 
 
            retVal.position.error = error; 
 
            delete retVal.position.coords; 
 
            $rootScope.$broadcast('$geolocation.position.error', error); 
 
           }); 
 

 
          }, options); 
 
        } 
 
       } else { 
 
        retVal.position = { 
 
         error: { 
 
          code: 2, 
 
          message: 'This web browser does not support HTML5 Geolocation' 
 
         } 
 
        }; 
 

 
       } 
 
      }, 
 

 
      
 

 
      position: {} 
 
      //console.log(position); 
 
     }; 
 

 
     return retVal; 
 
     
 

 
    }]);

？私にいくつかの解決策を提案してください。

出典

2016-07-15 Abhay Sharma

ない明確な具体的にどのような問題があります。多くのコードが示されていますが、問題はありません。 – charlietfl

上記のコードを入れてみるだけで、私は緯度と経度を取得しています。私はこれをGoogle map apiに入れて地図を表示したいと思っています。 –

johan – charlietfl