angular-google-maps - 如何确保 map 加载

Question

getGMap() 返回 Map 对象的一个​​实例。如果 map 未准备好，则此函数返回 undefined。是否有事件或方法可以告诉 map 已准备好并且调用 getGMap 肯定会返回 Google map ？

谢谢

亚什

Answer 1

您可以在 Controller 中使用 uiGmapIsReady - 请参阅 docs 中的 IsReady。
uiGmapIsReady 返回:
- map 加载并准备好后的 promise
- 一组 map 信息(我称之为 map_instances )
-- 数组长度取决于您在页面中加载的 map 数量
-- 数组中的每个对象都包含谷歌 map 对象

要在您的控制对象上使用 getGmap() ready，则如下所示:

HTML

<div ng-app="myApp" ng-controller="myController">
    <ui-gmap-google-map 
        center="map.center" 
        zoom="map.zoom" 
        control="map.control">
    </ui-gmap-google-map>
</div>

Controller

myApp.controller('myController', function ($scope, uiGmapIsReady) {

    $scope.map = {
        center : {
            latitude: 37.7749295, 
            longitude: -122.4194155 
        },
        zoom : 14,
        control : {}
    };

    uiGmapIsReady.promise()
    .then(function (map_instances) {
        var map1 = $scope.map.control.getGMap();    // get map object through $scope.map.control getGMap() function
        var map2 = map_instances[0].map;            // get map object through array object returned by uiGmapIsReady promise
    });

});

请注意如何通过两种方法访问 map 对象:
- 通过 map_instances 数组(看起来像 [map1Instance, map2Instance, ...] )
- 通过 $scope.map.control.getGMap() 只要你在你的 html 和 $scope 中定义了它

JSFIDDLE