1

我正在使用 angular-google-maps 指令。我正在使用 ui-boostrap 模式来显示地图。我在名为 mapSelectLocation.html 的文件中定义了我的模态内容。这是我打开模式的方式：

var modalInstance = $modal.open({
    templateUrl: '/path/to/templates/mapSelectLocation.html',
    controller: 'mapSelectLocationController'
});

地图选择位置.html：

<div class='modal-body'>
    <ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'>         </ui-gmap-google-map>
</div>

地图选择位置控制器：

function mapSelectLocationController($scope, $modalInstance) {
    $scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
    $scope.readyForMap = true;
}

这将显示弹出窗口并适当地渲染地图。但是，当我关闭模式并重新打开它时，地图无法正确呈现。大部分地图区域呈灰色显示，左上角只有一小部分地图可见。

但是，如果我将 mapSelectLocation.html 的内容从文件本身移动到同一页面上的角度模板脚本中，它会很好地打开并重新打开，每次都正确呈现：

<script type="text/ng-template" id="mapSelectLocation.template">
    <div class='modal-body'>
        <ui-gmap-google-map ng-if="readyForMap" center='map.center' zoom='map.zoom'>         </ui-gmap-google-map>
    </div>
</script>

当然也要更新 templateUrl：

var modalInstance = $modal.open({
    templateUrl: 'mapSelectLocation.template',
    controller: 'mapSelectLocationController'
});

有人可以告诉我为什么将我的模态内容放在单独的文件中不起作用吗？我宁愿将它分开，也不愿使用角度脚本模板。

4

1 回答 1

2

找到了解决方案。Angular-Google-Maps 提供 uiGmapIsReady 服务，让您知道 ui-map 何时准备就绪。使用此承诺，您可以传递一个回调函数，该函数允许您访问地图的控件属性，该属性有一个可用于刷新地图的 refresh() 函数。这允许刷新地图，在随后的模式打开时正确呈现它。

这是一个示例解决方案：

var module = angular.module('test', ['ui.bootstrap', 'uiGmapgoogle-maps']);
module.controller('controllerA', ['$scope', '$modal', 'uiGmapIsReady', controllerA]);
module.controller('mapSelectLocationController', ['$scope', '$modalInstance', 'uiGmapIsReady', mapSelectLocationController]);

function controllerA($scope, $modal, uiGmapIsReady) {

    $scope.openMapDialog = function () {
        var modalInstance = $modal.open({
            templateUrl: '/app/mapTemplate.html',
            controller: 'mapSelectLocationController'
        });

        modalInstance.result.then(function (test) {
            debugger;
        });
    }
}

function mapSelectLocationController($scope, $modalInstance, uiGmapIsReady) {
    $scope.map = { center: { latitude: 39.8433, longitude: -105.1190 }, zoom: 10 };
    $scope.readyForMap = true;
    $scope.control = {};

    uiGmapIsReady.promise().then(function (maps) {
        $scope.control.refresh();
    });
}

module.config(function (uiGmapGoogleMapApiProvider) {
    uiGmapGoogleMapApiProvider.configure({
        v: '3.17',
        libraries: 'weather,geometry,visualization'
    });
});

和模板：

<div class="modal-body">
<h4>Click a location on the map</h4>
<hr />
<div class="row">
    <ui-gmap-google-map center='map.center' control='control' zoom='map.zoom'></ui-gmap-google-map>
</div>

<h4>Available Addresses</h4>
<hr />
<div class="row">
    <div class="grid no-border">
        <div class="grid-body">
            Addresses will be listed here...
        </div>
    </div>
</div>

对于角度谷歌地图 v2 及以下版本，请参阅此 SO 答案： 如何等待 Angular Google Maps 将 getGMap 附加到控制对象 基本上从 v2 开始使用 uiGmapIsReady。

于 2015-03-09T01:37:28.837 回答