我正在尝试显示我在地图上突出显示的唯一区域的标签。
代码如下:
var map = $('#map').vectorMap({
regionsSelectable: true,
regionsSelectableOne: true,
series: {
regions: [{
scale: ['#cccccc', '#0A6EB4'],
values: data
}]
},
regionStyle: {
initial: {
fill: '#ffffff',
"fill-opacity": 1,
stroke: '#cccccc',
"stroke-width": 0,
"stroke-opacity": 1
},
hover: {
"fill-opacity": 1,
cursor: 'pointer'
},
selected: {
fill: '#0A6EB4'
},
selectedHover: {
fill: '#1E4669'
}
},
regionLabelStyle: {
initial: {
'font-family': 'Verdana',
'font-size': '12',
'font-weight': 'bold',
cursor: 'default',
fill: 'black'
},
hover: {
cursor: 'pointer'
}
},
labels: {
regions: {
render: function (code) {
if (activeCountries.hasOwnProperty(code)) {
var regions = $("#map").vectorMap("get", "mapObject").regions;
console.log(code, regions[code]); //<< ERROR!
}
}
}
}
});
在labels.regions.render函数中,我可以获取国家/地区的代码,可以验证数组activeCountries中是否存在该国家/地区,但是当我尝试检索国家/地区名称时(区域[code] .config.name)区域[code]未定义,缺少特定的代码!
这样我可以在activeCountries数组中存在的区域上显示标签吗?
这就是我要实现的目标:
以上图片是使用Highmaps完成的。
更新 感谢deblocker找到了解决方案。
现在,我只需要找到一种向区域文本添加白色阴影的方法,以使其在深色高亮区域也能更好地显示。
答案 0 :(得分:1)
所以,我相信您正在使用世界地图,对吗?
有些国家真的太小,无法在世界地图上以有意义的方式绘制SVG路径。
您可以:
添加标记以轻松找到那个小国家:
{
"BH": {"latLng": [26.066700, 50.557700], "name": "Bahrain"},
"GI": {"latLng": [36.140751, -5.353585], "name": "Gibraltar"},
"HK": {"latLng": [22.284681,114.158177], "name": "Hong Kong"},
"MQ": {"latLng": [14.641528,-61.024174], "name": "Martinique"},
"MT": {"latLng": [35.937496, 14.375416], "name": "Malta"},
"MU": {"latLng": [-20.183590,57.941208], "name": "Mauritius"},
"SG": {"latLng": [1.352083, 103.819836], "name": "Singapore"},
"GP": {"latLng": [16.265000,-61.551000], "name": "Guadeloupe"}
}
这是 DEMO:
$(document).ready(function () {
var map = "world_mill_en",
regions = {"MN": "#fad"};
$("#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;
}
}
}
});
});
<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 {
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>
顺便说一句,感谢bjornd出色的jVectorMap。