Question

我有以下问题：

我正在申请预订概览页面中有标签的酒店（“酒店详情”，“地图”，“评论”）。使用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);
            }
        }

请帮帮我吗？

Answer 1

当我使用Leaflet.js创建地图时，我遇到了这个问题。我试图初始化我的角度服务内部的地图，它加载非常奇怪。看来你正在尝试做同样的事情，但你是在控制器内部而不是服务中进行的，但效果是一样的。

问题在于时机。您的控制器在DOM完成加载之前运行，并且在角度有机会扫描DOM以构建您的Map页面部分之前运行。因此，当您调用加载谷歌地图的$scope.loadMap时，页面只会部分加载，正如您所期望的那样。问题是，一旦Angular完成扫描DOM局部，它就会修改DOM，然后将其加载到视图中。发生这种情况时，谷歌地图已经根据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();
}

然后在你的地图中，你会得到一个类似于<div hotel-map></div>的元素。这可以解决您的问题，因为在Angular完成扫描/修改DOM并完成部分渲染之前，您的地图永远不会被初始化。这样，地图的包含元素将处于其最终大小/位置，地图将正确加载到元素的中心。试一试，如果有效，请告诉我。

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

1 个答案: