Google maps 使用angularjs创建的选项卡中的Google地图未居中

我有以下问题：

我正在使用一个应用程序来预订酒店，该应用程序在概览页面中有选项卡（“酒店详细信息”、“地图”、“评论”）。选项卡是使用angularjs创建的。 此外，在页面中，我有一个酒店地址，它是指向“地图”选项卡的链接。 当我点击“地图”选项卡时，谷歌地图显示正常。但是，当我点击酒店地址时，“地图”选项卡打开，但地图没有居中。如果刷新页面，它将显示在中间

这是处理地图的代码：

$scope.loadMap = function (targetID){
            var latitude = $scope.latitude;     
            var longitude = $scope.longitude;
            if(latitude && longitude && document.getElementById(targetID) != null ){
                var center = new google.maps.LatLng(latitude, longitude);
                var map_options = {
                    zoom: 13,
                    center: center,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };

                // create map
                var map = new google.maps.Map(document.getElementById(targetID), map_options);

                // configure marker
                var marker_options = {
                    map: map,
                    position: center,
                    title: $scope.hotelName
                };

                // create marker
                var marker = new google.maps.Marker(marker_options);

                var infoWindow = new google.maps.InfoWindow();

                window.setTimeout(function(){
                    google.maps.event.trigger(map, 'resize');
                },2000);
            }
        }

---

你能帮帮我吗？

我在使用创建地图时遇到了这个问题。我试图在我的angular服务中初始化地图，它加载得非常奇怪。看起来您正试图做同样的事情，但您是在控制器内部而不是在服务中做的，但效果是一样的

问题在于时机。在DOM完成加载之前，在angular有机会扫描DOM以构建地图页面之前，运行控制器。因此，当您调用

$scope.loadMap

加载google地图时，页面仅部分加载，正如您所期望的那样。问题是一旦Angular完成对DOM部分的扫描，它就会修改DOM，然后将其加载到视图中。发生这种情况时，google地图已经根据DOM的先前状态初始化为其默认大小，并且在完成DOM后不会正确调整大小

好的，这是一个很长的解释，但下面是如何解决它的：

您应该在指令的链接函数中完成所有映射初始化。您可以创建一个名为

app.directive（'hotelMap'）

的指令，该指令将使用控制器中的

$scope.latitude

和

$scope.longitude

变量初始化地图

link: function(scope, elem, attrs){
    var center = new google.maps.LatLng(scope.latitude, scope.longitude);
    var map_options = {
        zoom: 13,
        center: center,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    // create map
    var map = new google.maps.Map(document.getElementById(targetID), map_options);
    // configure marker
    var marker_options = {
        map: map,
        position: center,
        title: $scope.hotelName
    };
    // create marker
    var marker = new google.maps.Marker(marker_options);
    var infoWindow = new google.maps.InfoWindow();
}

---

然后在部分映射中，您将有一个类似于

的元素。这就解决了您的问题，因为在Angular完成对DOM的扫描/修改并完成局部渲染之前，您的贴图永远不会初始化。这样，贴图的包含元素将处于其最终大小/位置，并且贴图将正确加载到元素的中心。试一试，让我知道这是否有效。

你能发布一个JSFIDLE（或同等版本）吗？另外，您应该研究如何使用

$window

、

$timeout

和

$document

服务。您好，您真的不应该从范围中引用HTML元素。。。这将导致内存泄漏，通常是一种不好的方法。