jvectormap：在标记之间画线？
我试图验证是否有可能使用jvectormap在地图上的标记之间绘制线条。
这里是我想要实现的想法：http://i.imgur.com/p1Zypv3.gif
有人可以给我一个提示，如果这是可行的，如果是的话如何？
欣赏任何输入。
这可以通过Jvectormap，Jvectormaps坐标转换器方法latLngToPoint()和Jvectormap顶部的SVG图层的组合来完成。 事实上，利用SVG.js作为Jvectormap顶层的图层，可以让您用SVG做任何事情，而用纬度 - 经度坐标替换点。
您需要在页眉中加载Jvectormap，Jvectormap映射文件，svg.js和svg.path.js插件（请参阅https://svgdotjs.github.io）。 您还需要在一个可以与CSS绝对设置重叠的区域创建两个div。
<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>
创建一个包含经度和纬度的标记数组，用于在地图上绘制线条和从上往下绘制线条：
var markerArray = [
{name:'Houston', latLng:[29.761993,-95.369568]},
{name:'New York', latLng:[40.710833,-74.002533]},
{name:'Kansas City', latLng:[39.115145,-94.633484]}
];
然后使用上面的标记设置您的Jvectormap：
var map = $('#map').vectorMap({
map: 'us_aea_en',
zoomMin: 1,
zoomMax: 1,
markers: markerArray
});
最后，回想一下你的地图作为一个对象，创建你的SVG图层，将经纬度坐标转换为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()块来启动。
你可以看到这个JSFiddle的更多细节：http://jsfiddle.net/ruzel/V8dyd/
免责声明：我不知道缩放会发生什么， 它在这个例子中被关闭。
最后我试图实现向JVectorMap添加行的功能。 SVG的解决方案很好，但不适用于Zoom，Move和Panzoom。 因此，我直接向JVectorMap添加了指定行的选项，类似于区域和标记。您可以查看包含所有内容的合并请求https://github.com/bjornd/jvectormap/pull/431的状态。 现在你可以使用画线了
var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];
尽管如此，拉取请求需要包含在新版本的jvectormap中，希望作者尽快做到:)工作代码位于我的个人博客：https://sevenhillsaway.com/map/
所以我一直在尝试@russellmania的答案。 它的工作原理，但只有在jsfiddle链接中包含的SVG版本。 如果我用SVG的实际版本尝试了相同的代码，它会在SVG上崩溃，说“this.clear（...）。attr”函数未定义。 不过，对于我而言，我希望JVector缩放和地图移动功能仍能正常工作。 但是通过地图上的SVG层，它不起作用。 或者让我们说，有2个选项：1）禁用移动和缩放（我不想这个）2）启用缩放，移动，但然后SWG层没有缩放和移动JVector一样，所以路径从地图去同步:)
我找到了一种使用标记在JVector中绘制线条的方法。 但这不是正确的方法。 所以我仍然在浏览jvectormap文档，如果有什么如何直接在jvectormap中画线。
链接地址: http://www.djcxy.com/p/70649.html