Javascript 在angular ui模式中显示google地图？

尝试在角度ui模式中加载简单的google地图。但是没有运气。得到的数据传递得很好，但在地图方面没有任何效果。。。请帮忙

$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中尝试了这个，效果很好

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

你可以使用；谷歌地图的AngularJS指令，非常灵活、强大且易于使用。我已经为您的案例准备了一个工作演示：

---

我希望这会有所帮助。

要去除灰色，请根据以下内容：

如果渲染在元素完全变大之前开始，google maps将根据较小的大小进行计算。最常见的情况是使用隐藏元素（例如，ng show）。要解决此问题，请改用“ng if”，因为这将等待附加到DOM，直到条件为true，这应该是在所有内容完全呈现之后

我已经修改了你的plunker以去除灰色。 控制器：

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>

---

您需要触发“调整大小”事件。请遵循以下路线：

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

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

---

我也遇到了类似的情况，在一个角度模态实例中加载贴图。

我搜索了很多地方，没有得到正确的简单解决方案。 所以我深入研究，找到了解决这个问题的简单方法

问题在于，映射试图在加载之前从模式中获取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 ***

}

---

此超时使贴图在模式中完全加载。一个简单的解决方案。

有没有办法解决从第二次打开覆盖层开始到处都是灰色的问题？我不明白你的问题，你能解释一下吗？打开地图。到目前为止看起来不错。关上它。再打开一次。请参见？如果在模态控制器中

$scope.render

设置为true，则使用

ng。或者，如果
render
在父控制器内，则使用
ng if='$parent.render'
。但是，您需要在
openModal（）
方法上设置
$scope.render