Question

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

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

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

感谢任何输入。

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图层，将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()块进行启动。

您可以查看此JSFiddle以获取更多详细信息：http://jsfiddle.net/ruzel/V8dyd/

免责声明：我不知道缩放会发生什么;这个例子已经关闭了。

Answer 2

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

Answer 3

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

我找到了一种使用Markers在JVector中绘制线条的方法。但这不是正确的方法。如果有任何关于如何在jvectormap中直接绘制线的话，我仍然会阅读jvectormap文档。

Answer 4

＆＃13;

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

＆＃13;

jvectormap：在标记之间画线？

4 个答案: