我是qQuery的新手,并没有在javascript中做过很多。
我有一个小的jVectorMap,上面有大约10个国家,我想在每个国家的顶部绘制一个小饼图。
我发现您可以创建标记,但我无法看到如何将自定义标记分配给某个国家/地区。
我很高兴使用SVG插件直接在jVectorMap上绘图,但我似乎无法让它工作。
E.g。使用" 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&#34; canvas&#34;创建了一个重复的div。并且世界地图被推倒了。是否可以引用jVectorMap使用的SVG绘图空间来绘制内容?
也许使用自定义标记或类似的东西有更好的方法吗?
非常感谢,如果这是一个愚蠢的问题,请道歉。
答案 0 :(得分:3)
您需要使用CSS将两个图层拉到彼此的顶部。创建以下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>
现在,而不是应用
$('#europe-map').svg({onLoad: drawCircle});
使用
$('#europe-map-overlay').svg({onLoad: drawCircle});
代替。
这会将圆圈放在地图上方。如果您想将圆圈放在特定的纬度 - 经度坐标上,请使用Jvectormap latLngToPoint()
方法进行合作。
答案 1 :(得分:2)
如果您不想使用svg标记,请使用新图层(在地图中的svg图层上方div)
参考地图
map = $("#world-map-gdp").vectorMap('get', 'mapObject');
并使用map.latLngToPoint()函数定位新图层中的点。
var newMarkerP = map.latLngToPoint(lat,lng);
$('#marker1').css('top',newMarkerP.x);
$('#marker1').css('top',newMarkerP.y);
如果进行缩放或拖动,您可以重新定位标记,使用相同的功能并应用css left和css top。
可能您可以使用新标记的顶部和左侧,但这是一个简单的解决方案。
答案 2 :(得分:0)
您可以使用JVectorMap API,绘制的方法是addCircle。