4

私はqQueryが初めてで、javascriptで多くのことをしたことがありません.

約 10 か国を含む小さな jVectorMap があり、各国の上に小さな円グラフを描画したいと考えています。

マーカーを作成できるようですが、カスタム マーカーを国に割り当てる方法がわかりません。

SVG プラグインを使用して jVectorMap の上に直接描画するだけで満足していますが、それを機能させることができないようです。

たとえば、「jQuery SVG」プラグインを使用して、マップの上に円を描画しようとしました。コードは次のとおりです。

<html>
<head>
  <link rel="stylesheet" href="jquery-jvectormap-1.1.1.css" type="text/css" media="screen"/>
  <link rel="stylesheet" href="jquery.svg.css" type="text/css" media="screen"/>
  <script src="jquery-1.8.0.min.js"></script>
  <script src="jquery-jvectormap-1.1.1.min.js"></script>
  <script src="jquery-jvectormap-north-west-europe.js"></script>
  <script src="jquery.svg.min.js"></script>
  <script>
    function drawCircle(svg) { 
      svg.circle(75, 75, 50, {fill: 'none', stroke: 'red', strokeWidth: 3}); 
    }
  </script>
</head>
<body>
  <div id="europe-map" style="width: 400px; height: 400px"></div>
  <script>
    $(function(){
      $('#europe-map').vectorMap({
        map: 'north-west-europe',
        focusOn: {
        x: 0.3,
        y: 0.4,
        scale: 1.25
    },
      });
    });

    $('#europe-map').svg({onLoad: drawCircle});
  </script>
</body>
</html>

結果は次のとおりです。

ブラウザに表示されるもの (Firefox 17)

事実上、jQuery SVG の「キャンバス」に対して重複した div が作成され、世界地図が押し下げられます。jVectorMap が描画に使用する SVG 描画スペースを参照することは可能ですか?

おそらく、カスタム マーカーなどを使用してこれを行うより良い方法はありますか?

これがばかげた質問である場合は、どうもありがとうございます。

4

3 に答える 3

3

CSS を使用して、2 つのレイヤーを重ね合わせる必要があります。次の HTML を作成します。

<div id="mapContainer" style="position:relative">
    <div id="europe-map" style="position:absolute;top:0px;left:0px"></div>
    <div id="europe-map-overlay" style="position:absolute;top:0px;left:0px"></div>
</div>

今、申請する代わりに

$('#europe-map').svg({onLoad: drawCircle});

使用する

$('#europe-map-overlay').svg({onLoad: drawCircle});

代わりは。

これにより、円がマップの上に配置されます。円を特定の緯度経度座標に配置する場合は、JvectormaplatLngToPoint()メソッドを使用して変換します。

于 2013-10-09T04:42:36.827 に答える
2

svg マーカーが必要ない場合は、新しいレイヤーを使用します (マップ内の svg レイヤー上の div)。

マップへの参照を取得する

map = $("#world-map-gdp").vectorMap('get', 'mapObject');

関数 map.latLngToPoint() を使用して、新しいレイヤーでポイントを見つけます。

var newMarkerP = map.latLngToPoint(lat,lng);
$('#marker1').css('top',newMarkerP.x);
$('#marker1').css('top',newMarkerP.y);

ズームまたはドラッグを行う場合、同じ関数を使用して css left と css top を適用すると、マーカーを再配置できます。

新しいマーカーの上部と左側で遊ぶことができるかもしれませんが、簡単な解決策です。

于 2013-03-12T13:00:12.087 に答える
0

JVectorMap API を使用できます。描画するメソッドは addCircle です。

于 2013-02-15T09:07:35.287 に答える