谷歌地图调整大小和中心，意想不到的行为

根据我的应用程序的状态，我想我的谷歌地图画布是不同的大小，我通过使用ng-class更改大小。当我调用ToggleExploreMap（）时，我的google地图的大小发生了变化，但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; 
}

来源

2015-01-06 guiomie

什么问题你面对 –

@sanojlawrence地图不是集中在通过标记。大小的改变确实有效，但setCenter没有正确应用。 – guiomie

你的问题是<divid="map_explore_canvas" ng-class="ExploreMapStyle"></div>

您指的div通过ID所以你的CSS应该像波纹管

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

简单的方法来记住

#意味着ID
.意味着类

和另一个问题

HTML 更换

<div id="ExploreMapArea">

要

<div id="map_explore_canvas">

，并在CSS

更换.ExploreMapArea{....}到#map_explore_canvas{....}

来源

2015-01-06 04:09:30

我使用angularjs ng-class来指派我的类。 ExploreMapArea div在我的代码片段中，但它几乎没用。 – guiomie

@guiomie你的片段在哪里 –

我原来的帖子。 – guiomie

谷歌地图调整大小和中心，意想不到的行为

回答

相关问题