谷歌地图第二次没有加载 - AngularJS

Question

我正在使用GoogleMap API（＆＃39; angular-google-maps＆＃39; js包），我有一种非常奇怪的行为。

我第一次加载它时，我会加载完整的地图，就像这里：

然后我关闭对话框并重新打开它，我看到了：

请记住，地图会在另一个对话框的顶部显示为对话框。

有什么想法吗？

Answer 1

如果您使用的是Angular Google Map模块，则必须将刷新属性添加到googlemap元素。

正如模块文档中所写：

  

refresh =“expression” - 表达式，如果计算结果为true，将触发地图刷新。最初隐藏地图时很有用。

Answer 2

你必须重绘地图。您可以使用以下代码执行此操作：

google.maps.event.trigger(map, 'resize');

这样可以刷新地图，解决问题。

Answer 3

只需添加：

$ scope.render = true;

并将ng-if =“render”添加到地图控件中，如下所示：

<ui-gmap-google-map ng-if="$parent.render" center="map.center" zoom="map.zoom">
        <marker coords="map.center"></marker>
    </ui-gmap-google-map>

Answer 4

问题在这里得到解答https://github.com/allenhwkim/angularjs-google-maps/issues/88

您需要手动居中以避免此问题，如下所示

在你的js控制器

中

$scope.$on('mapInitialized', function (event, map)
{
    window.setTimeout(function() {
      window.google.maps.event.trigger(map, 'resize');
      map.setCenter(new google.maps.LatLng(38,-98));
    }, 100)
});

并在您的HTML中

<ng-map ng-if="subView=='map'" center="38,-98" zoom="5"></ng-map>