我有一幅世界地图,上面有一些突出显示的国家/地区,并且仅针对这些国家/地区,我要显示标签。
问题在于,如果这些国家/地区彼此靠近,则标签会重叠且不可读。
我知道我可以使用偏移功能来修改标签的位置,但是这些国家/地区可以通过CMS自动激活或停用,因此我没有预先知道哪个将突出显示,以及它们的标签是否重叠。
代码如下:
$(document).ready(function () {
var map = "world_mill_en",
regions = {"AF":1,"BI":1,"CM":1,"CF":1,"CD":1,"HT":1,"HN":1,"IQ":1,"LS":1,"SY":1};
$("#map").vectorMap({
map: map,
series: {
regions: [{
values: regions,
attribute: "fill"
}]
},
labels: {
regions: {
render: function(code){
return regions[code] && jvm.Map.maps[map].paths[code].name;
},
offsets: function(code){
return {
'HT': [150, 70], //doesn't work??
'HN': [0, 40]
}[code.split('-')[1]];
}
}
}
});
});
<html>
<head>
<title>jVectorMap Labels</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.css" type="text/css">
<style>
.jvectormap-region.jvectormap-element {
font-size:9px;
text-shadow: -1px -1px 3px #fff, 1px -1px 3px #fff, -1px 1px 3px #fff, 1px 1px 3px #fff;
}
</style>
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/jquery-jvectormap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/jvectormap@2.0.4/tests/assets/jquery-jvectormap-world-mill-en.js"></script>
</head>
<body>
<div id="map" style="width: 600px; height: 400px"></div>
</body>
</html>
所以我的问题是:有没有办法避免区域标签重叠?还是可以实施的算法来设置标签的正确偏移量?