以 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屋！