jvectormap：在标记之间画线？答案

【问题标题】：jvectormap: Draw lines between markers?jvectormap：在标记之间画线？
【发布时间】：2013-04-03 17:51:56
【问题描述】：

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

这是我想要实现的目标：http://i.imgur.com/p1Zypv3.gif

如果可行，有人可以给我一个提示吗？如果可行，该怎么做？

感谢任何意见。

【问题讨论】：

【解决方案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/

免责声明：我不知道缩放会发生什么；在这个例子中它是关闭的。

【讨论】：

【解决方案2】：

最后我尝试实现向 JVectorMap 添加 Lines 的功能。 SVG 的解决方案很好，但不适用于 Zoom、Move 和 Panzoom。所以我直接在 JVectorMap 中添加了指定 Lines 的选项，类似于 Regions 和 marker。您可以查看 Pull Request 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/

【讨论】：

【解决方案3】：

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

我找到了一种使用标记在 JVector 中画线的方法。但这不是正确的方法。所以我还在浏览jvectormap文档，如果有什么直接在jvectormap中画线的方法。

【讨论】：

【解决方案4】：

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

【讨论】：