Kri*_*oit 5 javascript google-maps-api-3 angularjs angular-google-maps
当使用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中访问它.
尝试使用ng-if代替ng-show/ng-hide.Angular-google-maps与ng-show/ng-hide存在问题.
请参阅此https://github.com/nlaplante/angular-google-maps/issues/291
我在这里找到了解决方案
向 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);
});
});
| 归档时间： |
|
| 查看次数： |
5265 次 |
| 最近记录： |