Question

这个问题与here提出的问题非常相似。但是，有一些小的差异。当我最初将其放入网站时，我的地图已加载而没有问题。我正在经历将Angularjs添加到网站的过程，并注意到“小”＃地图问题。我有一个非常简单的代码注入，它似乎触发了一些带有加载顺序的东西。

奇怪的是以下内容：如果我调整浏览器的大小，我最终会到达一个按预期显示地图的地方（每个div css）。这就是为什么我认为它是一个加载顺序问题，但它没有通过.resize（）调用解决。

不确定它是否相关，但这是由后端的Express，Nodejs网络服务器驱动的。该地图按预期显示，设置了网络服务器，没有注入Angularjs代码。

非常感谢任何帮助。

编辑：以下代码。注意没有ng-include（这只是一个css文件列表），这通常会加载。

<html ng-app class="no-js lt-ie9 lt-ie8 lt-ie7">
    <head ng-include="'style.html'">
        <script src="vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
        <script src="js/angular.min.js"></script>
    </head>
    <body>
        <div id="main" class="container">
            <div id="content" class="content bg-base section">
                <div id="map" class="span10"></div>
            </div>
        </div>
    </body>
    <script>
        $(function(){ $('#map').vectorMap(
        {
            map: 'world_mill_en', 
            backgroundColor: 'transparent',
            regionsSelectable: true,
            regionsSelectableOne: true,
            regionStyle: 
            {
                selected: { fill: 'Red' }
            }
        }); 
        });
    </script>
</html>

Answer 1

我非常不愿意用指令加载我的地图，但在一天结束时我屈服了。对于遇到相同问题的人，请参阅下面的代码： HTML看起来像这样：

<div class="item active">
    <div countrymap class="span10"></div> 
    <div class="carousel-caption">
        <h3 style="color:red" ><strong>{{countryName}}</strong><h3> 
    </div>
</div>

指令看起来像这样：

app.directive('countrymap', [function() 
{
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            $(element).width('auto'),
            $(element).height(500),
            scope.$watch("countryMap", function (newCountry, oldCountry) 
            {
                setTimeout( function() 
                { 
                    $(element).vectorMap
                    ({
                        map: newCountry,
                        backgroundColor: 'transparent',
                        regionsSelectable: true,
                        regionsSelectableOne: true,
                        zoomButtons : false
                    });
                }, 20);
            })
        }
    };
}]);

Answer 2

在我用以下链接对象链接后，下面的答案对我有用。

angular.element(document).ready(function () {}

参见下面的示例

 .directive('countrymap', [function () {
    return {
        restrict: 'A',
        link: function (scope, element, attrs) {
            angular.element(document).ready(function () {
                angular.element(element).width('auto');
                angular.element(element).height(500);
                scope.$watch("countryMap", function (newCountry, oldCountry) {
                    setTimeout(function () {
                        angular.element(element).vectorMap
                        ({
                            map: newCountry,
                            backgroundColor: 'transparent',
                            regionStyle: {
                                initial: {
                                    fill: '#000000',
                                    opacity: '.9'
                                },
                                hover: {
                                    opacity: '.5'
                                }
                            },
                            regionsSelectable: true,
                            regionsSelectableOne: true,
                            zoomButtons: true
                        });
                    }, 20);
                });
            });
        }
    };
}]);

jVectorMap使用Angularjs渲染较小

2 个答案: