我用jquery和angualrJS分别做了个demo,地图刚开始的时候是隐藏的,点击一个图片后,该图片消失,地图显示,地图由于在显示的过程中,大小变化了,所以使用map.invalidateSize()方法,让地图很快显示出来;用jQuery写,一点问题都没有,然而,用angularJS写,这个方法却不生效,请大神们指教~
<body ng-app="app" ng-controller="ctrl">
<div id="box">
<div class="map-box" ng-show="!show" ng-class="{'show': !show}">
<div id="map"></div>
<span>×</span>
</div>
<img src="fake_map.png" ng-click="fn()" ng-show="show">
</div>
</body>
<script type="text/javascript">
var map = L.map('map').setView([22.54046422124227, 113.93264221191406], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/mapbox.streets-basic/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiYWJieW1ycyIsImEiOiJjaW9jb3J0ZWEwNGJwdmlsend4M2VoeWp5In0._xG7qbB8euaHzRxbY2DrFw', {
maxZoom: 18
}).addTo(map);
var marker = L.marker([22.54046422124227, 113.93264221191406]).addTo(map);
var app = angular.module('app',[]);
app.controller('ctrl', function ($scope) {
$scope.show = true;
$scope.fn = function(){
$scope.show=!$scope.show;
map.invalidateSize();
console.log('test');
}
})
</script>
已修复~
$scope.fn = function() {
};