角谷歌，地图确实现在可以正确地显示，当它启动时是隐藏 [英] angular-google-maps does now show correctly when it's hidden at start
问题描述
在地图隐藏的开始与NG-显示/ NG隐藏，它并没有显示正确一次看到。与标准地图相同的麻烦，只有我们可以调整大小发送给它的，因为我们有访问地图对象。
When map starts hidden with ng-show/ng-hide, it does not show correctly once visible. Same trouble with a standard map, only we can send a resize to it since we have access to the map object.
下面是与地图隐藏启动一个样本。按钮切换地图的可视性。
Here's a sample that starts with the map hidden. The button toggle the visibility of the map.
<!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地图，我会派一个resize到地图对象，但我没有访问它的角谷歌-地图。
With google-maps in js, I would send a resize to the map object, but I don't have access to it in angular-google-maps.
推荐答案
我找到了解决办法<一href=\"http://stackoverflow.com/questions/21644789/angular-google-maps-how-to-use-method-in-the-controller\">here
控件属性添加到谷歌地图标记：
Add a control attribute to the google-map tag:
<google-map
center="mapOption.center"
zoom="mapOption.zoom"
control="myGoogleMap">
</google-map>
如果是，控制器，$ scope.myGoogleMap设为{}，当映射得到初始化它会被填满。之后，你可以使用$ scope.myGoogleMap.refresh（）来调整大小发送到地图！
Then in the controller, set $scope.myGoogleMap to {}, it will be filled when the maps get initialized. After that you can use $scope.myGoogleMap.refresh() to send a resize to the map !
下面是控制器的工作。
Here's the controller working.
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);
});
});
这篇关于角谷歌，地图确实现在可以正确地显示，当它启动时是隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
