PhoneGap的不点火Angularjs指令里面的GoogleMaps V3 domListener功能 [英] Phonegap not firing GoogleMaps v3 domListener function inside Angularjs directive

问题描述

我有一个指令在我的模板之一，以下是该指令的code：

I've got a directive in one of my templates, the following is the code of that directive:

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模拟器上运行时，它只是不火的功能初始化（）。

When running the app on the browser, everything works as expected. But when running on the iOS Simulator, it just doesnt fire the function initialize().

我试过这个（描述这里）

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

卜那么它只是无法在浏览器中，并在simualtor工作两者。

Bu then it just fails to work both in the browser and in the simualtor.

任何想法，为什么？

推荐答案

您必须确保科尔多瓦是获取当前位置之前准备就绪。这里是PhoneGap的文档的解释

You have to make sure that cordova is ready before getting the current location. here is an explanation from phonegap docs

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

编辑：

这里如何在角方式使用deviceReady

here is how you can use deviceReady in angular way

在您的api.js您储存服务

in your api.js where you keep service

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

然后在您的控制器注入地理定位服务

Then inject geoLocation service in your controller

geolocation.getCurrentPosition(function (position) {

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

这篇关于PhoneGap的不点火Angularjs指令里面的GoogleMaps V3 domListener功能的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！