Javascript Google地图调整大小并居中，意外行为

根据我的应用程序的状态，我希望我的谷歌地图画布具有不同的大小，我使用ng类更改大小。当我调用ToggleExploreMap（）时，我的谷歌地图的大小会发生变化，但是setCenter没有正确应用。位置确实会改变，但在我的标记上不会改变，但会移到标记位置的左上角

这是虫子吗

请看这把小提琴，以了解所见行为的示例。如果单击“调整大小”按钮，贴图将调整大小，但您需要再次单击以使贴图实际位于标记的中心

控制器

    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>  

您的问题是

您通过ID引用div，因此您的css应该像下面这样

#map_explore_canvas{
    width:1080px; 
    height:500px;
}

简单的记忆方法

#

表示id

表示等级

还有一个问题

HTML 替换

到

和css

---

将

.ExploreMapArea{….}

替换为

#map#u explore_canvas{….}

您的问题是什么facing@sanojlawrence地图未在经过的标记上居中。大小的改变确实有效，但是设置中心没有正确应用。我用angularjs ng类分配我的类。ExploreMapArea div在我的代码段中，但它几乎没有任何用处。@guiomie你的代码段在哪里我不明白你的代码段在哪里（jsfiddle）我的原始帖子就是代码所需的全部内容。我将删除ExploreMarea，因为它看起来很混乱。我添加了一把小提琴，请参阅初始帖子

#map_explore_canvas{
    width:1080px; 
    height:500px;
}

 <div id="ExploreMapArea">

 <div id="map_explore_canvas">