7

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

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

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

欣赏任何输入。

4

4 回答 4

3

这可以通过 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/

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

于 2013-10-09T04:26:56.267 回答
2

最后，我尝试实现将 Lines 添加到 JVectorMap 的功能。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/

于 2017-12-20T13:46:00.133 回答
0

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

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

于 2017-12-19T04:00:27.103 回答
-1 

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

于 2015-12-16T10:55:31.507 回答