gpt4 book ai didi

javascript - jvectormap 仅显示特定区域的标签

转载 作者:行者123 更新时间:2023-12-01 01:07:03 26 4
gpt4 key购买 nike

我正在尝试显示我在 map 上突出显示的唯一区域的标签。

这是代码:

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 中是否存在国家/地区,但是当我尝试检索国家/地区名称时( Regions[code].config.name)regions[code]未定义,缺少具体代码!

那么我可以显示 activeCountries 数组中存在的区域上的标签吗?

这就是我想要实现的目标:

enter image description here

上图是使用 Highmaps 完成的。

更新感谢 deblocker 找到了解决方案。

现在我只需要找到一种方法来向区域文本添加白色阴影,以使其在深色突出显示区域上也能更好地可见。

最佳答案

所以,我相信您正在使用世界地图,对吗?

有些国家确实太小,无法在世界地图上以有意义的方式绘制 SVG 路径。

您可以:

  • 使用分辨率更高的 map (并且明显放大,直到您看到那些微小的区域)
  • 添加标记以轻松定位小国家/地区:

    {
    "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"}
    }

<小时/>如果您需要 map 中区域的区域名称,您可以从加载的 map 中获取:

Here is the 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。

关于javascript - jvectormap 仅显示特定区域的标签,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55523616/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com