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

我需要一个在初始 map 加载完成后运行一次函数的命令
- 但仅限于初始加载，不是在每次 map 操作之后

我不能使用 idle或 tilesloaded因为这些在每次移动后都会被触发...

我要运行的函数需要获取 map 边界，以便在初始页面加载时从服务器拉取数据 - 我希望这在初始加载时发生一次，然后使用刷新成为手动功能 map-control
- 如果我使用 idle或 tilesloaded要启动它，它会在用户移动 map 时每次提取服务器数据。

有谁知道如何在初始 map 加载后触发一次关闭命令以获取 map 详细信息(边界等)？

我试过输入 maps.getBounds()在第二个 promise 函数中，但它不起作用。

请注意，I've got a fiddle working here - 我无法在 $scope.map 之后再做出任何 promise 控件/选项等被定义是因为它们不返回 promise :

文档中的代码示例没有说明如何在 $scope.map 之后 链接一个 promise。被定义为。

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>

Controller

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 返回的对象promise 与 maps 完全不同tilesloaded 等事件返回的对象等等......很困惑。

此外，the FAQ只说明如何使用tilesloaded获取 map 实例 - 由于已经描述的原因，它不起作用。

最佳答案

我认为“正确”的方法是通过将 uiGmapIsReady 服务注入(inject) Controller 来使用 API IsReady 功能。参见 the documentation .

有了 uiGmapIsReady promise ，就可以将 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 数组以在每个 map 上运行函数(如果您的页面中加载了多个 map ):

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

那么整个 Controller 看起来像

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

...不确定为什么在常见问题解答中未提及:' How do I access the map instance? ' - 或者为什么建议使用 tilesloaded ( which is thought to be unreliable ) 而不是 idle 或 uiGmapIsReady...？
也许常见问题解答的问题真的是“我如何持续访问 map ”？

关于javascript - angular-google-maps 在初始 map 加载后运行一次函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28247260/