以 angular-ui 模式显示谷歌地图? [英] Showing a google map in angular-ui modal?
问题描述
尝试在 angular-ui 模式中加载一个简单的谷歌地图.然而没有运气.数据传递得很好,但在地图方面没有任何作用......请帮忙.
$modalInstance.opened.then(function() {var mapOptions = {中心:新的 google.maps.LatLng(34.834442, -82.3686479),变焦:8};新的 google.maps.Map(document.getElementById("eventMap"), mapOptions);});
在模态 html 中:
<div class="col-md-5" id="eventMap" style="display: block; height: 150px;"></div>
我在常规页面 HTML 中尝试过这个并且工作正常...
我错过了什么?提前致谢!
去除灰度,根据 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;//代码在这里}
模板:
<map ng-if="$parent.render" center="[{{$parent.lat}}, {{$parent.lng}}]" zoom-control="true" zoom="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 模式显示谷歌地图?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!