2016-07-15 5 views
0

위치를 가져 오는 데 Angular Geolocation을 사용하고 있습니다. 그것의 반환 위도와 경도. 이 위도와 경도를 사용하여지도를 표시하고 싶습니다. 또한 5km의 서클을 보여주고 싶습니다. index.html을 내 코드를 살펴Google지도에서 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

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; 
 
     
 

 
    }]);

어떻게 그것을 할 수하는 gGeolocation.js? 나에게 몇 가지 해결책을 제안 해주세요. http://angular-ui.github.io/angular-google-maps/

+1

명확하지 어떤 구체적인 문제 : – charlietfl

+0

단순히 위 코드를 넣으면 위도와 경도가 표시됩니다. 나는 이것을 Google지도 API에 넣고지도를 보여주고 싶습니다. –

+0

그래서 johan – charlietfl

답변

1

이 각도 - 구글 -지도에서보세요, 당신은지도와 원을 만들 수 있어야합니다. 표시되는 코드는 많이 있지만 문제는 확인되지 않았습니다.
+0

예 위의 링크를 이미 보았습니다. 그러나 그것은 나의 요구 사항을 채우지 못하고 있습니다. –

관련 문제