0

我有以下问题：

我正在使用一个应用程序来预订在概览页面中有标签（“酒店详情”、“地图”、“评论”）的酒店。选项卡是用 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);
            }
        }

你能帮我吗？

4

1 回答 1

0

我在使用Leaflet.js. 我试图在我的角度服务中初始化地图，它的加载非常奇怪。看起来你正在尝试做同样的事情，但你是在控制器内部做的，而不是服务，但效果是一样的。

问题在于时机。您的控制器在 DOM 完成加载之前运行，并且在 angular 有机会扫描 DOM 以构建您的地图页面部分之前。因此，当您调用 时，该页面仅部分加载$scope.loadMap，这会加载谷歌地图，正如您所期望的那样。问题是一旦 Angular 完成扫描 DOM 部分，它会修改 DOM，然后将其加载到视图中。发生这种情况时，谷歌地图已经根据 DOM 的先前状态初始化为其默认大小，并且在 DOM 完成 angular 时无法正确调整大小。

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

您应该在指令的链接函数内完成所有地图初始化。您可以创建一个名为 的指令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 并完成渲染您的部分之前，您的地图永远不会被初始化。这样，地图的包含元素将处于其最终大小/位置，并且地图将正确加载到元素的中心。试一试，让我知道这是否有效。

于 2013-10-24T03:25:47.303 回答