jVectorMap 使用 Angularjs 渲染较小

Question

这个问题与 here 提出的问题非常相似。但是，有一些小的差异。当我最初将地图放在站点中时，我的地图加载没有问题。我正在完成将 Angularjs 添加到站点的过程，并注意到 'small' 地图问题。我有一个非常简单的代码注入，它似乎触发了加载顺序。

奇怪的是：如果我调整浏览器的大小，我最终会到达地图按预期显示的位置（根据 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

在我用

包装 link 对象后，下面的答案对我有用

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 渲染较小

jVectorMap renders small with Angularjs

javascript

css

jquery

angularjs

jvectormap