jvectormap:在标记之间画线？

Question

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

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

如果这是可行的,有人可以给我一个提示,如果可以的话怎么办？

感谢任何输入.

Answer 1

这可以通过结合Jvectormap、Jvectormaps坐标转换器方法来完成latLngToPoint()这可以通过 Jvectormap、Jvectormaps 坐标转换器方法和 Jvectormap 顶部的 SVG 层事实上，利用 SVG.js 作为 Jvectormap 之上的一层，您几乎可以使用 SVG 执行任何操作，同时用经纬度坐标替换点。

您需要在页面标题中加载 Jvectormap、Jvectormap 地图文件、svg.js 和 svg.path.js 插件（请参阅https://svgdotjs.github.io ）。您还需要在一个 div 中创建两个可以与 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/

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