根据我的应用程序的状态,我希望我的谷歌地图 Canvas 具有不同的大小,我使用 ng-class 更改大小。当我调用 ToggleExploreMap() 时,我的谷歌地图的大小发生变化,但 setCenter 未正确应用。位置确实改变了,但它在我的标记上没有改变,但它被移动到标记位置的左上角。
这是一个错误吗?
请参阅此 fiddle 以获取所见行为的示例。如果单击调整大小按钮, map 会调整大小,但您需要再次单击才能使 map 真正以标记为中心。 http://jsfiddle.net/bkogdfva/1/
Controller
var exploreMap = new google.maps.Map(document.getElementById("map_explore_canvas"),myOptions);
var $scope.ExploreMapStyle = "map_explore_canvas";
//Click Handlers
$scope.ExploreDetails = function(marker){
ToggleExploreMap();
google.maps.event.trigger(exploreMap, 'resize');
exploreMap.setCenter(marker.position);
};
function ToggleExploreMap(){
if(exploreMode === "explore"){
$scope.ExploreMapStyle = "map_explore_detail";
exploreMode = "detail";
}
else{
$scope.ExploreMapStyle = "map_explore_canvas";
exploreMode = "explore";
}
};
HTML
<div id="map_explore_canvas" ng-class="ExploreMapStyle"></div>
CSS
.map_explore_canvas{
width:1080px;
height:500px;
}
.map_explore_detail{
width:400px;
height:400px;
}
最佳答案
你的问题是<div
<强> id
="map_explore_canvas" ng-class="ExploreMapStyle"></div>
您通过ID引用div,因此您的CSS应如下所示
#map_explore_canvas{
width:1080px;
height:500px;
}
简单易记的方法
#
表示 ID
.
表示类别
还有一个问题
HTML 替换
<div id="ExploreMapArea">
至
<div id="map_explore_canvas">
和CSS
替换.ExploreMapArea{....}
至#map_explore_canvas{....}
关于javascript - Google map 调整大小并居中,意外行为,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/27791896/