jvectormap：如何在标记之间绘制连线？

Question

我想确认是否可以使用jvectormap在地图上的标记之间画线。

这是我想要实现的效果的想法：http://i.imgur.com/p1Zypv3.gif

请问有人能给我提示是否可行，如果可以，如何实现？

感谢任何帮助。

- user2128860

Answer 1

这可以通过结合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/ 免责声明：我不知道缩放会发生什么事情；在这个例子中它被关闭了。

- russellmania

Answer 2

最后，我尝试实现向JVectorMap添加行的功能。使用SVG的解决方案很好，但在缩放、移动和平移缩放时无法正常工作。因此，我直接向JVectorMap添加了指定行的选项，类似于区域和标记。您可以查看Pull Request的状态https://github.com/bjornd/jvectormap/pull/431，其中包括所有内容。现在，您可以使用以下代码绘制线条：

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

然而，这个pull request需要被包含在新版本的jvectormap中，希望作者会尽快完成 :) 工作代码在我的个人博客上：https://sevenhillsaway.com/map/

- Dominik Franek

Answer 3

我一直在尝试@russellmania的答案。它有效，但仅适用于包含在jsfiddle链接中的SVG版本。如果我使用实际版本的SVG尝试相同的代码，则会在SVG上崩溃，显示“this.clear（...）.attr”函数未定义。 然而，对我来说，我希望JVector缩放和地图移动功能仍然可以正常工作。但是，在地图上覆盖SVG层时，它不起作用。或者说，有两个选择： 1）禁用移动和缩放（我不想要这个） 2）启用缩放、移动，但是SWG层与JVector不同步缩放和移动，因此路径与地图脱节：）

我找到了一种使用标记在JVector中绘制线条的方法。但这不是正确的方法。所以我仍在查看jvectormap文档，是否有任何方法可以直接在jvectormap中绘制线条。

- Dominik Franek

Answer 4

var markerIndex=1;
var markerCoords=[];
latLng={72,62};
markersCoords[markerIndex] = latLng;
map.addMarker(markerIndex, {latLng: [latLng.lat, latLng.lng]});
markerIndex += 1;

- Ananta Prasad