jvectormap: рисовать линии между маркерами?

Это можно сделать с помощью комбинации Jvectormap, метода конвертера координат Jvectormaps latLngToPoint() и слоя SVG поверх Jvectormap. Фактически, использование SVG.js в качестве слоя поверх Jvectormap позволяет вам делать практически все, что вы могли бы делать с SVG, заменяя точки координатами широты и долготы.

Вам потребуется загрузить Jvectormap, файл карты Jvectormap, svg.js и плагин svg.path.js (см. https://svgdotjs.github.io) в заголовке страницы. Вам также потребуется создать два блока div в одном, которые могут перекрываться с абсолютными настройками CSS.

<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/

Отказ от ответственности: я не знаю, что происходит с масштабированием; он отключен для этого примера.

Наконец я попытался реализовать функциональность добавления линий в JVectorMap. Решение с SVG прекрасно, но не работает с Zoom, Move и Panzoom. Поэтому я добавил непосредственно в JVectorMap возможность указывать линии, аналогичные регионам и маркерам. Вы можете просмотреть статус запроса на включение 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/

Итак, я пробовал ответ @russellmania. Однако он работает только с версией SVG, которая включена в ссылку jsfiddle. Если я попробовал тот же код с реальной версией SVG, он вылетит на SVG, говоря, что функция «this.clear(...).attr» не определена. Однако я хотел, чтобы функции масштабирования и перемещения карты JVector все еще работали. Но со слоем SVG поверх карты это не работает. Или, скажем, есть 2 варианта: 1) отключить перемещение и масштабирование (мне это не нужно) 2) включить масштабирование, перемещение, но тогда слой SWG не масштабируется и не перемещается так же, как JVector, поэтому путь десинхронизируется с картой :)

Я нашел способ рисовать линии в JVector с помощью маркеров. Но это не правильный путь. Так что я все еще просматриваю документацию по jvectormap, если есть что-то, как рисовать линию прямо в jvectormap.