在jVectorMap上绘制自定义标记

我是qQuery的新手，并没有在javascript中做过很多。

我有一个小的jVectorMap，上面有大约10个国家，我想在每个国家的顶部绘制一个小饼图。

我看到你可以创建标记，但我看不出你如何将自定义标记分配给一个国家。

我很高兴只是使用SVG插件直接在jVectorMap上绘图，但我似乎无法让它工作。

例如，使用“jQuery SVG”插件，我试图在地图上绘制一个圆圈。 这是代码：

         function drawCircle(svg) { svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); }    
  $(function(){ $('#europe-map').vectorMap({ map: 'north-west-europe', focusOn: { x: 0.3, y: 0.4, scale: 1.25 }, }); }); $('#europe-map').svg({onLoad: drawCircle});    

这是结果：

实际上，为jQuery SVG“canvas”创建了一个重复的div，并且按下了世界地图。 是否可以引用jVectorMap使用的SVG绘图空间来绘制内容？

也许有更好的方法来使用自定义标记或类似的东西吗？

非常感谢，如果这是一个愚蠢的问题，请道歉。

Answer 1

您需要使用CSS将两个图层拉到彼此的顶部。 创建以下HTML：

现在，而不是申请

 $('#europe-map').svg({onLoad: drawCircle}); 

使用

 $('#europe-map-overlay').svg({onLoad: drawCircle}); 

代替。

这会将圆圈放在地图上方。 如果要将圆圈放在特定的纬度 – 经度坐标上，请使用Jvectormap latLngToPoint()方法进行协调。

Answer 2

如果你不想svg标记，使用一个新图层（div在地图上的svg图层）

获取地图参考

 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。

也许您可以使用新标记的顶部和左侧，但这是一个简单的解决方案。

Answer 3

您可以使用JVectorMap API，绘制的方法是addCircle。