Question

尝试在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);
});

在modal html中：

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

我在常规页面HTML中试过这个并且工作得很好......

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

Answer 1

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

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

我希望这会有所帮助。

Answer 2

根据https://angular-ui.github.io/angular-google-maps/#!/faq：

删除灰度

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

我修改了你的弹药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>

Answer 3

您需要触发'resize'事件。请遵循以下这些方针：

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

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

Answer 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 ***

}

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

在angular-ui模式中显示谷歌地图？

4 个答案: