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

Google Map resize and center, unexpected behaviour

本文关键字：意外 调整 谷歌地图      更新时间：2023-09-26

根据我的应用程序的状态，我希望我的谷歌地图画布具有不同的大小，我使用 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";
        }
      };

该目录

<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
.表示类

和另一个问题

该目录取代

 <div id="ExploreMapArea">

自

 <div id="map_explore_canvas">

和 CSS

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

相关文章：