这个问题与提出的问题非常相似 here .但是，有一些小的差异。当我最初将 map 放在站点中时，我的 map 加载没有问题。我正在经历将 Angularjs 添加到网站的过程，并注意到“小” map 问题。我有一个非常简单的代码注入(inject)，它似乎触发了加载顺序。
奇怪的是:如果我调整浏览器的大小，我最终会到达一个 map 按预期显示的地方(每个 div css)。这就是为什么我认为它是加载顺序问题，但无法通过 .resize() 调用解决。
不确定它是否相关，但这是由后端的 Express、Nodejs 网络服务器驱动的。 map 按预期显示，网络服务器已设置且没有 Angularjs 代码注入(inject)。
如有任何帮助，我们将不胜感激。
编辑:下面的代码。请注意，如果没有 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>
最佳答案
我非常不愿意使用指令加载我的地图，但最终我屈服了。对于那些遇到同样问题的人，请参阅下面的代码: 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);
})
}
};
}]);
关于javascript - jVectorMap 使用 Angularjs 渲染很小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28933168/