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 絶対設定とオーバーラップできる 2 つの div を 1 つに作成する必要があります。

<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 に答える
-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 に答える