Question

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

这是一个错误吗？

请参阅此小提琴，了解所见行为的例子。如果单击调整大小按钮，则会调整地图的大小，但您需要再次单击以实际将地图置于标记的中心。 http://jsfiddle.net/bkogdfva/1/

控制器

    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;
}

简单的记忆方法

#表示身份证明
.表示班级

和另一个问题

HTML 取代

 <div id="ExploreMapArea">

要

 <div id="map_explore_canvas">

和css

将.ExploreMapArea{....}替换为#map_explore_canvas{....}

谷歌地图调整大小并居中，意外行为

1 个答案: