angular-google-maps在初始地图加载后运行函数ONCE

Question

使用angular-google-maps将谷歌地图合并到一个应用程序中

我需要一个命令,它将在初始地图加载完成后运行一个函数ONCE
- 但仅限于初始加载,而不是在每个地图操作之后

我不能使用idle或tilesloaded因为这些都是在每次运动后被解雇的......

我想要运行的函数需要获取映射边界以在初始页面加载时从服务器中提取数据 - 我希望在初始加载时发生ONCE,然后是使用刷新的手动函数map-control
- 如果我使用idle或tilesloaded触发它将会每次用户移动地图时拉取服务器数据.

有没有人知道如何在初始地图加载后触发一次性命令来获取地图详细信息(边界等)？

我已经尝试过maps.getBounds()第二个承诺函数,但它不起作用.

请注意,我有一个小提琴在这里工作 - $scope.map在定义控件/选项等之后我无法链接任何更多的承诺,因为它们没有返回一个承诺:

在文档中的代码示例不显示如何串连承诺后的$scope.map定义.

HTML

<div class="angular-google-map-container" ng-controller="MainCtrl">
    <ui-gmap-google-map center="map.center" zoom="map.zoom" draggable="true" options="map.options" events="map.events" control="googlemap">
    </ui-gmap-google-map>
</div>

调节器

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi) {
    uiGmapGoogleMapApi
    .then(function(maps){
        $scope.map = {
            center: {
                latitude: 37.7749295, 
                longitude: -122.4194155 
            },
            zoom: 12
            events: {
                tilesloaded: function (maps, eventName, args) {
                    myServiceFuntion(maps)    // this work fine but fires every time
                },
                dragend: function (maps, eventName, args) {
                    myServiceFuntion(maps)    // this work fine but fires every time
                },
                zoom_changed: function (maps, eventName, args) {
                    myServiceFuntion(maps)    // this work fine but fires every time
                }
            }
        }

        $scope.bounds = maps.getBounds()    // this gives me 'getBounds() not a function'
        myServiceFuntion(maps);    // this gives an error... ?
        return maps;            //no promise returned here so no chance to delay the function below
    })
    .then(function(maps){
        //is this where i need to put my function ?  doesn't delay on map load since no promise returned...
    });
});

显然,maps通过返回的对象uiGmapGoogleMapApi的承诺是完全不同maps的事件,如返回的对象tilesloaded等等......相当混乱.

此外,FAQ仅指示如何使用tilesloaded来获取地图实例 - 由于已经描述的原因,该实例无效.

Answer 1

我认为"正确"的方法是IsReady通过将uiGmapIsReady服务注入控制器来使用API 功能.请参阅文档.

有了这个uiGmapIsReady承诺,它可以通过以下map代码传递给函数/服务等:

uiGmapIsReady.promise()                     // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) {                 // instances is an array object
    var maps = instances[0].map;            // if only 1 map it's found at index 0 of array
    $scope.myOnceOnlyFunction(maps);        // pass the map to your function
});

也可以遍历instances数组以在每个地图上运行函数(如果您的页面中加载了多个地图):

uiGmapIsReady.promise()                     // this gets all (ready) map instances - defaults to 1 for the first map
.then(function(instances) {                 // instances is an array object
    angular.forEach(instances, function(value, key) {
        var maps = value.map;
        $scope.myOnceOnlyFunction(maps);    // will apply this function to each map
    });
});

所以整个控制器看起来像

myApp.controller('MainCtrl', function($scope, uiGmapGoogleMapApi, uiGmapIsReady) {
    uiGmapGoogleMapApi
    .then(function(maps){
        $scope.googlemap = {};
        $scope.map = {
            center: {
                latitude: 37.7749295, 
                longitude: -122.4194155 
            },
            zoom: 13,
            pan: 1,
            options: myAppServices.getMapOptions().mapOptions,
            control: {},
            events: {
                tilesloaded: function (maps, eventName, args) {
                },
                dragend: function (maps, eventName, args) {
                },
                zoom_changed: function (maps, eventName, args) {
                }
            }
        };
    });

    uiGmapIsReady.promise()                     // this gets all (ready) map instances - defaults to 1 for the first map
    .then(function(instances) {                 // instances is an array object
        var maps = instances[0].map;            // if only 1 map it's found at index 0 of array
        $scope.myOnceOnlyFunction(maps);        // this function will only be applied on initial map load (once ready)
    });

    $scope.myOnceOnlyFunction = function(maps){  // this will only be run once on initial load
        var center = maps.getCenter();           // examples of 'map' manipulation
        var lat = center.lat();
        var lng = center.lng();
        alert('I\'ll only say this once ! \n Lat : ' + lat + '\n Lng : ' + lng);
    };
});

的jsfiddle

...不确定为什么常见问题解答中没有提及:' 如何访问地图实例？' - 或者为什么使用tilesloaded(被认为是不可靠的)而不是idle或uiGmapIsReady......？
也许FAQ问题真的是" 我如何持续访问地图 "？