5

当使用 ng-show/ng-hide 开始隐藏地图时，一旦可见，它就无法正确显示。标准地图也有同样的问题，只有我们可以向它发送调整大小，因为我们可以访问地图对象。

这是一个以隐藏地图开始的示例。按钮切换地图的可见性。

<!doctype html>
<html>
    <head>
        <style>
            .angular-google-map-container {
                width: 100%;
                height: 100px;
            }
            .mymap {
                width: 100%;
                height: 100px;
            }
        </style>
    </head>
    <body ng-app="app" ng-controller="myCtrl">
        <button ng-click="visible = !visible">ToogleMap</button>
        <div ng-show="visible">
            <google-map center="map.center" zoom="map.zoom"></google-map>
            <div class="mymap"></div>
        </div>
        <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.8/angular.min.js'></script>
        <script src='http://maps.googleapis.com/maps/api/js?sensor=false'></script>
        <script src='http://underscorejs.org/underscore-min.js'></script>
        <script src='https://rawgithub.com/nlaplante/angular-google-maps/master/dist/angular-google-maps.min.js'></script>
        <script>
            var app = angular.module("app", ["google-maps"]);
            app.controller("myCtrl", function($scope, $timeout) {
                $scope.map = {
                    center: {
                        latitude: 45.4,
                        longitude: -71.9
                    },
                    zoom: 11
                };
                $scope.visible = false;
            }); 
        </script>
    </body>
</html>

使用 js 中的 google-maps，我会向地图对象发送调整大小，但我无法在 angular-google-maps 中访问它。

4

3 回答 3

6

尝试使用 ng-if 代替 ng-show/ng-hide。Angular-google-maps 与 ng-show /ng-hide 存在问题。

看到这个https://github.com/nlaplante/angular-google-maps/issues/291

于 2014-05-21T15:13:09.890 回答
4

我在这里找到了解决方案

向 google-map 标签添加控制属性：

<google-map
    center="mapOption.center"
    zoom="mapOption.zoom"
    control="myGoogleMap">
</google-map>

然后在控制器中，将 $scope.myGoogleMap 设置为 {}，它会在地图初始化时填充。之后，您可以使用 $scope.myGoogleMap.refresh() 将调整大小发送到地图！

这是控制器工作。 

app.controller("myCtrl", function($scope, $timeout) {
    $scope.mapOption = {
         center: {
             latitude: 45.4,
             longitude: -71.9
         },
         zoom: 11
    };
    $scope.visible = false;
    $scope.mapViewPosition = {};
    $scope.$watch("visible", function(newvalue) {
        $timeout(function() {
             var map = $scope.myGoogleMap.refresh();
        }, 0);
    });
});
于 2014-05-17T02:28:52.327 回答
0

您需要在显示之前设置地图元素 css

                        const partMap = document.getElementById(mapDivId);


                            partMap.style.height = "400px";
                            partMap.style.width = "800px";
                            partMap.style.marginLeft = 'auto';
                            partMap.style.marginRight = 'auto';
                            const center = new google.maps.LatLng(center_lat, center_lon);
                            const mapOptions = {
                                zoom: 8,
                                scrollwheel: false,
                                center: center,
                                mapTypeId: google.maps.MapTypeId.ROADMAP
                            };

当元素没有明确的样式并且当元素处于“ng-hide”模式时样式信息不可用时，谷歌地图不起作用。

于 2019-01-09T00:02:07.197 回答