以 angular-ui 模式显示谷歌地图？答案

【问题标题】：Showing a google map in angular-ui modal?以 angular-ui 模式显示谷歌地图？
【发布时间】：2014-06-18 01:58:09
【问题描述】：

尝试在 angular-ui 模态中加载简单的谷歌地图。然而没有运气。数据得到了很好的传递，但在地图方面没有任何作用......请帮助。

$modalInstance.opened.then(function() {

var mapOptions = {
  center: new google.maps.LatLng(34.834442, -82.3686479),
  zoom: 8
};

  new google.maps.Map(document.getElementById("eventMap"), mapOptions);
});

模态html内部：

<div class="row clearfix">
  <div class="col-md-5" id="eventMap" style="display: block; height: 150px;"></div>
</div>

我在常规页面 HTML 中尝试过这个并且工作正常...

我错过了什么？提前谢谢！

【问题讨论】：

标签： javascript angularjs google-maps angular-ui angular-ui-bootstrap

【解决方案1】：

您可以使用angularjs-google-maps；一个用于谷歌地图的 AngularJS 指令，非常灵活、强大且易于使用。我已经为您的案例准备了一个工作演示：

http://plnkr.co/edit/eEtaGH?p=preview

我希望这会有所帮助。

【讨论】：

有没有办法解决从第二次打开叠加层开始到处都是灰色的问题？
我没听懂你的问题，你能再解释一下吗？
打开地图。到目前为止看起来不错。关闭它。再次打开它。看到了吗？
使用ng-if='render' - 其中$scope.render 在您的模态控制器中设置为true。或者，如果render 在您的父控制器中，则使用ng-if='$parent.render'。但是，您需要在 openModal( ) 方法上设置 $scope.render

【解决方案2】：

去除灰度，根据https://angular-ui.github.io/angular-google-maps/#!/faq：

如果在元素全尺寸之前开始渲染，谷歌地图会根据较小的尺寸进行计算。这是最常见的情况，隐藏元素（例如，ng-show）。要解决此问题，请改用“ng-if”，因为这将等待附加到 DOM，直到条件为真，这应该是在所有内容完全渲染之后。

我已经修改了您的 plunker http://plnkr.co/edit/JetUBY?p=preview 以消除灰色。控制器：

var ModalInstanceCtrl = function ($scope, $modalInstance, lat, lng) {
    $scope.render = true;
    // code here
}

模板：

<map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="8"> </map>

【讨论】：

【解决方案3】：

您需要触发“调整大小”事件。请遵循以下原则：

var map = new google.maps.Map(document.getElementById("eventMap"), mapOptions);

google.maps.event.trigger(map, 'resize', function () {
    // your callback content
});

【讨论】：

【解决方案4】：

我也遇到了类似的情况，我在角度模态实例中加载地图。

我也搜索了很多地方，但没有得到正确的简单解决方案。因此，我更深入地研究并找到了解决此问题的简单方法。

问题是，地图试图在加载之前从模态中获取 div，解决方案是：

在您的控制器中采用$timeout 角度参数，

function MyController($scope,$cookies,$modal,$window,roomService,$timeout) {

**** after all your model code is defined ****

$modalInstance.opened.then(function() {
    function initialize() {
        var latlng = new google.maps.LatLng(-34.397, 150.644);
        var myOptions = {
            zoom: 8,
            center: latlng,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        var map = new google.maps.Map(document.getElementById("eventMap"),
                myOptions);
    }
    $timeout(function() {
       initialize()
     }, 1000);
});

*** use the time out to make the div load and then call the map ***

}

这次超时使地图在模态中完美加载。一个简单的解决方案。

【讨论】：