在jvector贴图上的两个标记之间绘制的线末端绘制箭头

时间:2014-03-27 06:12:40

标签: javascript jquery dictionary svg jvectormap

我正在尝试在地图上的任何标记之间绘制箭头之间的箭头。我正在使用svg创建行:

var map = $('#map').vectorMap('get', 'mapObject');
var draw = SVG('svgMapOverlay').size(660, 400);
var coords1 = map.latLngToPoint(markerArray[0].latLng[0],markerArray[0].latLng[1]);
var coords2 = map.latLngToPoint(markerArray[1].latLng[0],markerArray[1].latLng[1]);
draw
 .path()
 .attr({ fill: 'none',stroke: '#c00', 'stroke-width': 2 })
 .M(coords1.x, coords1.y)
 .L(coords2.x, coords2.y);

我可以在两个标记之间绘制线条,但不能在线条末尾绘制箭头。我想要的是这样的:

http://jsfiddle.net/Z5Qkf/1/

这是JSFiddle http://jsfiddle.net/ruzel/V8dyd/

的示例jvectormap

你可以帮助我或建议一些选项,因为我是svg的新手,并使用svg在javascript中绘制对象。感谢

1 个答案:

答案 0 :(得分:0)

我做到了。

如果有人在寻找答案,我就是这样做的: https://github.com/mushtaqak/fancyWorldMap