5

このSOinitialize-google-map-in-angularjsでAndyJoslinの助けを借りてGoogleマップを初期化する方法を見つけたので、Googleマップオブジェクトを非同期でロードする方法を探しています。

phonecatプロジェクトでこれを行う方法の例を見つけました。

この例では、JSファイルがどのようにロードされているかに注意してください。index-async.html

プログラムにロードされているJadeScriptsパーシャルで、次のことを試しました。

script(src='js/lib/angular/angular.js')
script(src='js/lib/script/script.min.js')

script
  $script([
    'js/lib/angular/angular-resource.min.js',
    'js/lib/jquery/jquery-1.7.2.min.js',
    'http://maps.googleapis.com/maps/api/js?key=AIzaSyBTmi_pcXMZtLX5MWFRQgbVEYx-h-pDXO4&sensor=false',
    'js/app.js',
    'js/services.js',
    'js/controllers.js',
    'js/filters.js',
    'js/directives.js',
    'bootstrap/js/bootstrap.min.js'
    ], function() {
      // when all is done, execute bootstrap angular application
      angular.bootstrap(document, ['ofm']);
    });

これを実行してマップページをロードすると、次のようになります。

A call to document.write() from an asycrononously-loaded 
external script was ignored.

これは、Googleマップが現在サービスとしてロードされている方法です。

'use strict';

var app = angular.module('ofm.services', []);

app.factory('GoogleMaps', function() {

  var map_id  = '#map';
  var lat     = 46.87916;
  var lng     = -3.32910;
  var zoom    = 15;
  var map     = initialize(map_id, lat, lng, zoom);

  return map;
});

function initialize(map_id, lat, lng, zoom) {
  var myOptions = {
    zoom : 8,
    center : new google.maps.LatLng(lat, lng),
    mapTypeId : google.maps.MapTypeId.ROADMAP
  };
  return new google.maps.Map($(map_id)[0], myOptions);
}

これは私が読んだことを思い出したことから約束を返すはずだと思われます。しかし、このAngularJSは私にとって非常に新しいものです。

4

3 に答える 3

7

これがjQueryを使わずに思いついた私の解決策です:(要点はここにあります）

angular.module('testApp', []).
    directive('lazyLoad', ['$window', '$q', function ($window, $q) {
        function load_script() {
            var s = document.createElement('script'); // use global document since Angular's $document is weak
            s.src = 'https://maps.googleapis.com/maps/api/js?sensor=false&callback=initialize';
            document.body.appendChild(s);
        }
        function lazyLoadApi(key) {
            var deferred = $q.defer();
            $window.initialize = function () {
                deferred.resolve();
            };
            // thanks to Emil Stenström: http://friendlybit.com/js/lazy-loading-asyncronous-javascript/
            if ($window.attachEvent) {  
                $window.attachEvent('onload', load_script); 
            } else {
                $window.addEventListener('load', load_script, false);
            }
            return deferred.promise;
        }
        return {
            restrict: 'E',
            link: function (scope, element, attrs) { // function content is optional
            // in this example, it shows how and when the promises are resolved
                if ($window.google && $window.google.maps) {
                    console.log('gmaps already loaded');
                } else {
                    lazyLoadApi().then(function () {
                        console.log('promise resolved');
                        if ($window.google && $window.google.maps) {
                            console.log('gmaps loaded');
                        } else {
                            console.log('gmaps not loaded');
                        }
                    }, function () {
                        console.log('promise rejected');
                    });
                }
            }
        };
    }]);
于 2013-10-31T19:50:47.473 に答える
5

promiseAngularJSアプリでjQueryを使用している場合は、GoogleMapsAPIが読み込まれたときにを返すこの関数を確認してください。

https://gist.github.com/gbakernet/828536

これをAngularJSディレクティブで使用して、オンデマンドでGoogleマップを遅延ロードすることができました。御馳走を動作します：

angular.module('mapModule') // usage: data-google-map
    .directive('googleMap', ['$window', function ($window) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                // If Google maps is already present then just initialise my map
                if ($window.google && $window.google.maps) {
                    initGoogleMaps();
                } else {
                    loadGoogleMapsAsync();
                }

                function loadGoogleMapsAsync() {
                    // loadGoogleMaps() == jQuery function from https://gist.github.com/gbakernet/828536
                    $.when(loadGoogleMaps())
                        // When Google maps is loaded, add InfoBox - this is optional
                        .then(function () {
                            $.ajax({ url: "/resources/js/infobox.min.js", dataType: "script", async: false });
                        })
                        .done(function () {
                            initGoogleMaps();
                        });
                };

                function initGoogleMaps() {
                    // Load your Google map stuff here
                    // Remember to wrap scope variables inside `scope.$apply(function(){...});`
                }
            }
        };
    }]);
于 2013-07-01T01:23:52.253 に答える
2

これを見てください私はそれがより信頼できると思います

    var deferred = $q.defer();
                        var script = document.createElement('script');

                        $window.initMap = function() {
                            //console.log("Map  init ");

                            deferred.resolve();
                        }
                        script.src = "//maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places&callback=initMap";
                        document.body.appendChild(script);
                        return deferred.promise;
于 2014-12-11T10:28:53.640 に答える