在jVectorMap上绘制自定义标记 [英] Drawing custom markers on a jVectorMap
问题描述
我是qQuery的新手，并没有在javascript中做过很多。
我有一个小的jVectorMap，上面有大约10个国家，我想要在每个国家/地区上方绘制一个小饼图。
我看到您可以创建标记，但我看不出如何将自定义标记分配给某个国家/地区。
我很高兴只是使用SVG插件直接在jVectorMap上绘图，但我似乎无法让它工作。
例如使用jQuery SVG插件，我试图在地图上绘制一个圆圈。这是代码：
< html>
< head>
< link rel =stylesheethref =jquery-jvectormap-1.1.1.csstype =text / cssmedia =screen/>
< link rel =stylesheethref =jquery.svg.csstype =text / cssmedia =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-mapstyle =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>
这是结果：
< img src =https://i.stack.imgur.com/OZxEB.pngalt =浏览器中显示的内容（Firefox 17）>
有效，为jQuery SVGcanvas创建一个重复的div，并按下世界地图。是否可以引用jVectorMap使用的SVG绘图空间来绘制内容？
也许有更好的方法可以使用自定义标记或类似的东西来做到这一点？ / p>
非常感谢，如果这是一个愚蠢的问题，请道歉。
您需要使用CSS将两个图层拉到彼此的顶部。创建以下HTML：
< div id =mapContainerstyle =position：relative>
< div id =europe-mapstyle =position：absolute; top：0px; left：0px>< / div>
< div id =europe-map-overlaystyle =position：absolute; top：0px; left：0px>< / div>
< / div>
现在，而不是申请
$（'＃europe-map'）。svg（{onLoad：drawCircle}）;
使用
$（'＃europe-map-overlay'）。svg（{onLoad：drawCircle}）;
而不是。
这将把在地图上方的圆圈。如果您想将圆圈放在特定的纬度 - 经度坐标上，请使用Jvectormap latLngToPoint（）方法来制作covnersion。
I'm new to qQuery and have not done a whole lot in javascript.
I've a small jVectorMap with about 10 countries on it and I want to draw a small pie chart on top of each country.
I see that you can create markers, but I can't see how you would assign custom markers to a country.
I am happy just to draw directly on top of the jVectorMap using a SVG plugin, but I can't seem to get that to work.
E.g. using the "jQuery SVG" plugin, I've tried to draw a circle on top of the map. Here's the code:
<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>
And here's the result:
Effectively, a duplicate div is created for the jQuery SVG "canvas" and the world map is pushed down. Is it possible to reference the SVG drawing space used by jVectorMap to draw stuff on?
Perhaps there is a better way to do this using custom markers or something like that?
Many thanks, and apologies if this is a silly question.
You need to use CSS to pull the two layers over the top of one another. Create the following HTML:
<div id="mapContainer" style="position:relative">
<div id="europe-map" style="position:absolute;top:0px;left:0px"></div>
<div id="europe-map-overlay" style="position:absolute;top:0px;left:0px"></div>
</div>
Now, instead of applying
$('#europe-map').svg({onLoad: drawCircle});
use
$('#europe-map-overlay').svg({onLoad: drawCircle});
instead.
This will put the circle on top of the map. If you want to put the circle on specific latitude-longitude coordinates, use the Jvectormap latLngToPoint() method to make the covnersion.
这篇关于在jVectorMap上绘制自定义标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
