javascript - Google map 调整大小并居中，意外行为

Question

根据我的应用程序的状态，我希望我的谷歌地图 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;
}

Answer 1

你的问题是<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{....}