javascript - Phonegap 未在 Angularjs 指令内触发 GoogleMaps v3 domListener 函数

Question

我的一个模板中有一个指令，以下是该指令的代码:

appDirectives.directive('map', function() {
  return {
    restrict: 'E',
    scope: {
      onCreate: '&'
    },
    link: function ($scope, $element, $attr) {

      alert("This fires just fine.");

      function initialize() {

        alert("This doesnt fire on Phonegap.");

        navigator.geolocation.getCurrentPosition(function (pos) {
          $scope.currentLocation = new google.maps.LatLng(pos.coords.latitude, pos.coords.longitude);
          var mapOptions = {
            center: $scope.currentLocation,
            zoom: 15,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            disableDefaultUI: true
        };

        var map = new google.maps.Map($element[0], mapOptions);

        var currentLocation = $scope.currentLocation;

        $scope.onCreate({
          map: map,
          currentLocation: currentLocation
        });

        // Stop the side bar from dragging when mousedown/tapdown on the map
        google.maps.event.addDomListener($element[0], 'mousedown', function (e) {
          e.preventDefault();
          return false;
        });

        }, function (error) {
          alert('Erro ao obter localização.');
        });
      }

      google.maps.event.addDomListener(window, 'load', initialize());

    }
  }

在浏览器上运行应用程序时，一切都按预期运行。但是当在 iOS 模拟器上运行时，它只是不会触发函数initialize()。

我已经尝试过这个(如here所述):

google.maps.event.addDomListener(window, 'load', initialize);

但是它在浏览器和模拟器中都无法工作。

知道为什么吗？

Answer 1

在获取当前位置之前，您必须确保 Cordova 已准备好。这是来自phonegap 文档的解释

http://docs.phonegap.com/en/1.7.0/cordova_events_events.md.html#deviceready

编辑:

这是如何以 Angular 方式使用 deviceReady

在你保存服务的 api.js 中

    //cordova service
    apiServices.factory('cordovaReady', function() {
        return function (fn) {

            var queue = [];

            var impl = function () {
                queue.push(Array.prototype.slice.call(arguments));
            };

            document.addEventListener('deviceready', function () {
                queue.forEach(function (args) {
                    fn.apply(this, args);
                });
                impl = fn;
            }, false);

            return function () {
                return impl.apply(this, arguments);
            };
        };
    });

    //map service
    apiServices.factory('geolocation', function ($rootScope, cordovaReady) {
        return {
            getCurrentPosition: cordovaReady(function (onSuccess, onError, options) {
                navigator.geolocation.getCurrentPosition(function () {
                        var that = this,
                            args = arguments;

                        if (onSuccess) {
                            $rootScope.$apply(function () {
                                onSuccess.apply(that, args);
                            });
                        }
                    }, function () {
                        var that = this,
                            args = arguments;

                        if (onError) {
                            $rootScope.$apply(function () {
                                onError.apply(that, args);
                            });
                        }
                    },
                    options);
            })
        };
    });

然后在 Controller 中注入(inject)地理位置服务

geolocation.getCurrentPosition(function (position) {

    $scope.position = {
        coords: {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude
        }
    };
});