【问题标题】:Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directivePhonegap 没有在 Angularjs 指令中触发 GoogleMaps v3 domListener 函数
【发布时间】:2014-06-05 22:25:28
【问题描述】:

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

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

那么它在浏览器和模拟器中都无法正常工作。

知道为什么吗?

【问题讨论】:

    标签: javascript angularjs google-maps cordova google-maps-api-3


    【解决方案1】:

    在获取当前位置之前,您必须确保cordova 已准备就绪。这是phonegap docs的解释

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

    编辑:

    这里是如何以角度方式使用 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);
                })
            };
        });
    

    然后在你的控制器中注入 geoLocation 服务

    geolocation.getCurrentPosition(function (position) {
    
        $scope.position = {
            coords: {
                latitude: position.coords.latitude,
                longitude: position.coords.longitude
            }
        };
    });
    

    【讨论】:

    • 最好将修复的相关部分包含在 stackoverflow 答案中,这样在链接失效的情况下可以保留答案。
    • @mdewitt 这是我的错。希望现在没事
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2019-11-21
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多