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

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

在模态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)的情况.要解决此问题,请使用"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>