Question

不知何故谷歌地图没有显示，它只显示页脚。当我最大化/最小化或调整浏览器窗口大小时，地图变得可见。

JS：

$scope.mapOptions = {
        center: new google.maps.LatLng(17.0812981, -96.7357315),
        zoom: 8,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };

HTML：

    <div class="panel-heading">Google Map</div>
       <div id="map_canvas1" style="min-height:400px" ui-map="myMap"
        ui-event="{'map-zoom_changed': 'setZoomMessage(myMap.getZoom())' }"
        ui-options="mapOptions">
    </div>

Here is an example of how it looks like

Answer 1

我遇到了类似的问题，解决方案是在加载地图后明确触发resize事件：

1）注册ui-event="{'map-idle' : 'onMapIdle()'}"

2）调用resize事件：

$scope.onMapIdle = function () {
    google.maps.event.trigger($scope.myMap, 'resize');
};

示例

var app = angular.module('mapApp', ['ui.directives']); app.controller('mapCtrl', function ($scope) { $scope.mapOptions = { center: new google.maps.LatLng(17.0812981, -96.7357315), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; $scope.onMapIdle = function () { google.maps.event.trigger($scope.myMap, 'resize'); }; });

<script src="https://code.angularjs.org/1.4.8/angular.js"></script> <script src="https://maps.googleapis.com/maps/api/js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui/0.4.0/angular-ui.js"></script> <div ng-app="mapApp" ng-controller="mapCtrl"> <div class="panel-heading">Google Map</div> <div id="map_canvas1" style="min-height:400px" ui-map="myMap" ui-event="{'map-zoom_changed': 'setZoomMessage(myMap.getZoom())', 'map-idle' : 'onMapIdle()' }" ui-options="mapOptions"> </div> </div>

Answer 2

我使用了这个库http://angular-ui.github.io/angular-google-maps/#!/

添加地图对象：

$scope.map = {
        center: {
            latitude: 24.0414647,
            longitude: -102.799835
        },
        zoom: 5,
        options: {
            scrollwheel: false
        },
        bounds: {},
        control: {}
    };

然后使用此函数刷新地图：

$scope.renderMap = function () {
        $scope.map.control.refresh({
            latitude: $scope.map.center.latitude,
            longitude: $scope.map.center.longitude
        });
    }

最后，我用一个按钮调用了renderMap：

<button ng-click="renderMap">Update Map</button>

AngularJs - Google地图不可见，仅在我调整浏览器窗口大小时才可见

2 个答案: