jvectormap：在标记之间画线？

我正在尝试验证是否可以使用jvectormap在地图上的标记之间绘制线

以下是我想要达到的目标：

有人能给我一个提示，如果这是可行的，如果是，如何

---

欣赏任何输入。

这可以通过Jvectormap、Jvectormaps坐标转换方法

latLngToPoint（）

和Jvectormap顶部的SVG层的组合来完成。事实上，利用SVG.js作为Jvectormap之上的一个层，可以让您在用经纬度坐标替换点的同时，几乎做任何可以用SVG做的事情

您需要在页面标题中加载Jvectormap、Jvectormap映射文件、svg.js和svg.path.js插件（请参阅）。您还需要在一个div中创建两个div，它们可以与CSS绝对设置重叠

<div id="mapContainer" style="position:relative">
    <div id="map" style="position:absolute;top:0px;left:0px"></div>
    <div id="svgMapOverlay" style="position:absolute;top:0px;left:0px"></div>
</div>

然后使用上面的标记设置Jvectormap：

var map = $('#map').vectorMap({
    map: 'us_aea_en',
    zoomMin: 1,
    zoomMax: 1,
    markers: markerArray
});

最后，将地图作为对象调用，创建SVG层，将lat long坐标转换为div内的点：

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);

大部分JS应该进入

$（function（）

调用或

$（document）.ready（function（）

块）以启动

有关更多详细信息，请参见此JSFIDLE：

免责声明：我不知道缩放会发生什么；在本例中，它已关闭。

var-markerIndex=1；
var markerCoords=[]；
latLng={72,62}；
markersCoords[markerIndex]=latLng；
map.addMarker（markerIndex，{latLng:[latLng.lat，latLng.lng]}）；
markerIndex+=1；

所以我一直在尝试@russellmania的答案。但是，它只适用于JSFIDLE链接中包含的SVG版本。如果我在实际版本的SVG中尝试相同的代码，它会在SVG上崩溃，并说“this.clear（…）.attr”函数未定义。 但是，对我来说，我希望JVector缩放和地图移动功能仍然有效。但是，在地图上使用SVG层时，它不起作用。或者说，有两个选项： 1） 禁用移动和缩放（我不想要这个） 2） 启用缩放、移动，但SWG层的缩放和移动与JVector不同，因此路径将从映射中取消同步：）

---

我找到了一种使用标记在JVector中画线的方法。但这不是正确的方法。因此，我仍在阅读jvectormap文档，如果有什么方法可以直接在jvectormap中画一条线的话。

最后，我尝试实现向jvectormap添加线的功能。使用SVG的解决方案很好，但不适用于缩放、移动和平移缩放。因此，我直接向JVectorMap添加了指定线的选项，类似于区域和标记。现在，您可以使用

var行=[
{点：[[50.0755,14.4378]，[55.7558,37.6173]]，文本：“布拉格-莫斯科]；

尽管如此，拉请求仍需要包含在新版本的jvectormap中，希望作者能尽快完成：） 工作代码在我的个人博客中：

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);