Question

我正在使用Angular地理位置获取位置。它返回的纬度和经度位置。我想用这个纬度和经度显示地图。还想展示一个5公里的圆圈。看看我的代码 index.html

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

ngGeolocation.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;
        

    }]);

我该怎么做？请给我一些解决方案。

Answer 1

看看angular-google-maps，你应该能够创建地图和圆圈： http://angular-ui.github.io/angular-google-maps/

如何在Google地图中使用Angular geolocation指令？

1 个答案: