如何将 Angular 地理定位指令与谷歌地图一起使用？答案

【问题标题】：How to use Angular geolocation directive with google map ?如何将 Angular 地理定位指令与谷歌地图一起使用？
【发布时间】：2016-11-18 16:39:25
【问题描述】：

我正在使用 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;
        

    }]);

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

【问题讨论】：

不清楚具体是什么问题。显示了很多代码，但没有发现问题
只是我得到了上面代码的纬度和经度。我想在google map api中使用这个输出并想显示地图。
所以使用下面johan回答中建议的模块
知道如何使用 geofire 吗？
一次一步。您只是在问如何创建有问题的地图

标签： angularjs google-maps firebase geolocation geofire

【解决方案1】：

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

【讨论】：

是的，我已经看过上面的链接，但它没有满足我的要求。