我是 qQuery 的新手,并没有在 javascript 中做很多事情。
我有一个包含大约 10 个国家/地区的小型 jVectorMap,我想在每个国家/地区的顶部绘制一个小饼图。
我看到您可以创建标记,但我看不到您将如何将自定义标记分配给一个国家/地区。
我很高兴使用 SVG 插件直接在 jVectorMap 上绘制,但我似乎无法让它工作。
例如,使用“jQuery SVG”插件,我尝试在地图上画一个圆圈。这是代码:
<html>
<head>
<link rel="stylesheet" href="jquery-jvectormap-1.1.1.css" type="text/css" media="screen"/>
<link rel="stylesheet" href="jquery.svg.css" type="text/css" media="screen"/>
<script src="jquery-1.8.0.min.js"></script>
<script src="jquery-jvectormap-1.1.1.min.js"></script>
<script src="jquery-jvectormap-north-west-europe.js"></script>
<script src="jquery.svg.min.js"></script>
<script>
function drawCircle(svg) {
svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3});
}
</script>
</head>
<body>
<div id="europe-map" style="width: 400px; height: 400px"></div>
<script>
$(function(){
$('#europe-map').vectorMap({
map: 'north-west-europe',
focusOn: {
x: 0.3,
y: 0.4,
scale: 1.25
},
});
});
$('#europe-map').svg({onLoad: drawCircle});
</script>
</body>
</html>
结果如下:
实际上,为 jQuery SVG“画布”创建了一个重复的 div,并且世界地图被下推。是否可以引用 jVectorMap 使用的 SVG 绘图空间来绘制内容?
也许有更好的方法来使用自定义标记或类似的东西来做到这一点?
非常感谢,如果这是一个愚蠢的问题,我们深表歉意。