在angular-ui modal中显示谷歌地图？ [英] Showing a google map in angular-ui modal?

问题描述

尝试在angular-ui模式中加载简单的Google地图。然而没有运气。数据得到的通过没问题，但没有任何工作在地图方面......请帮助。

  $ modalInstance.opened。然后（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-5id =eventMapstyle =display：block; height：150px;>< / div> 
< / div> 
  

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

我错过了什么？
先谢谢您！

解决方案

要移除灰色，请根据https://angular-ui.github.io/angular-google-maps/#!/faq ：

如果渲染在元素为全尺寸之前开始，则Google地图根据较小的尺寸进行计算。隐藏元素通常是这种情况（例如，ng-show）。为了解决这个问题，可以使用ng-if来代替，因为这将等待附加到DOM，直到条件为真，这应该在所有事情都已完全呈现之后。

我修改了你的plunker http://plnkr.co/edit/JetUBY?p =预览删除灰度。
控制器：

$ $ p $ $ $ $ c $ var ModalInstanceCtrl = function（$ scope，$ modalInstance，lat，lng）{
$ scope.render = true;
// code here
}

模板：

 < map ng-if =$ parent.rendercenter =[{{$ parent.lat}}，{{$ parent.lng }}]zoom-control =truezoom =8> < /地图> 
  

Trying to load a simple google map within an angular-ui modal. However no luck. The data get's passed in fine, but nothing works in terms of the map... Please help.

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

Inside the modal html:

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

I tried this in the regular page HTML and worked fine...

What am I missing? Thank you in advance!

解决方案

To remove the grayness, according to https://angular-ui.github.io/angular-google-maps/#!/faq:

If rendering starts before elements are full size, google maps calculates according to the smaller size. This is most commonly the case with a hidden element (eg, ng-show). To fix this, use "ng-if" instead, as this will wait to attach to the DOM until the condition is true, which should be after everything has rendered fully.

I've modified your plunker http://plnkr.co/edit/JetUBY?p=preview to remove the grayness. Controller:

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

Template:

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

这篇关于在angular-ui modal中显示谷歌地图？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！