jvectormap：マーカー間に線を引く？

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を2つ作成する必要があります。

<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 map = $('#map').vectorMap({ 
    map: 'us_aea_en', 
    zoomMin: 1, 
    zoomMax: 1, 
    markers: markerArray 
}); 

：

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を設定します最後に、地図をオブジェクトとして呼び出し、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/

免責事項：私はズームと何が起こるか分かりません。この例ではオフになっています。

Answer 2

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

Answer 3

だから私は@russellmaniaの答えをしようとしています。ただし、jsfiddleリンクに含まれているSVGバージョンでのみ動作します。 SVGの実際のバージョンで同じコードを試した場合、SVGで "this.clear（...）。attr"関数が定義されていないとクラッシュします。 しかし、私にとっては、JVectorズームと地図移動機能がまだ機能したかったのです。しかし、マップ上のSVGレイヤでは、それは動作しません。または、2つのオプションがあります： 1）移動とズームを無効にします（これは必要ありません） 2）ズームを有効にして移動しますが、SWGレイヤーはズームしてJVectorと同様に移動するので、パスはマップ：

マーカーを使用してJVectorで線を描く方法が見つかりました。しかし、これは正しい方法ではありません。だから、jvectormapに直接行を引く方法があれば、私はまだjvectormapのドキュメントを見ています。

Answer 4

最後に、JVectorMapにラインを追加する機能を実装しようとしました。 SVGのソリューションは問題ありませんが、Zoom、Move、Panzoomでは機能しません。そこでJVectorMapに、リージョンとマーカーに似たラインを指定するオプションを直接追加しました。すべてが含まれているプルリクエストhttps://github.com/bjornd/jvectormap/pull/431のステータスを確認できます。今、あなたはまだ、プルリクエストがjvectormapの新しいバージョンに含まれる必要がある

var lines = [ {points: [[50.0755,14.4378], [55.7558,37.6173]], text:"Prague - Moscow];

を使用して線を描くことができ、作者はすぐにそれを行うことを願っています:) 作業コードはここに私の個人的なブログであります： https://sevenhillsaway.com/map/