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

Question

我正在使用 GoogleMap API（'angular-google-maps' js 包），我有一个非常奇怪的行为。

第一次加载它时，我会加载完整的地图，如下所示：

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

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

有任何想法吗？

Answer 1

如果您使用 Angular Google Map 模块，则必须将 refresh 属性添加到 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>