2013-02-05 8 views
10

マーカー配列からデータを取得してonmarkerclick関数で呼び出そうとしているので、マーカーをクリックするとURLに移動できます。 。私は、マーカー配列にURLを追加し、これをonmarkerclickに返します。おかげで高度であなたの助けのために:Jvectorマーカーを追加してリンクを取得する方法マップ

$(function(){ 
    $('#map1').vectorMap({ 
        map: 'world_mill_en', 
        scale: ['#C8EEFF', '#0071A4'], 
        normalizeFunction: 'polynomial', 
        hoverOpacity: 0.7, 
        hoverColor: false, 
        markerStyle: { 
        initial: { 
          fill: '#F8E23B', 
          stroke: '#383f47' 
        } 
        }, 
        backgroundColor: '#383f47', 
        markers: [{latLng: [48.921537, -66.829834], name: "something", weburl : "/blah/foo" 

      },{latLng: [45.995944, -64.171143], name: "something else", weburl : "/blah/foo" 

      },], 
        onMarkerClick: function(events, label, index, weburl) { 
        alert (1+weburl);     
        } 
      }); 
}); 

答えて

26

そんなに偶然、私は私が見つけた解決策は、外部の配列を作成することでした

:) ..のみ昨日と同じ問題に直面して、インデックスでアクセスクリック機能に..私はちょうどこの種の問題に別の道を解決して、私はそうしたために非常に巧妙な感じ

var markers = [ 
    {latLng: [48.921537, -66.829834], name: "something", weburl : "/blah/foo"}, 
    {latLng: [45.995944, -64.171143], name: "something else", weburl : "/blah/foo-else"} 
]; 

$(function(){ 
    $('#map1').vectorMap({ 
        ... 
        markers: markers, 
        onMarkerClick: function(event, index) { 
         // alter the weburl 
         alert(markers[index].weburl); 
        } 
      }); 
}); 
+2

ありがとうございます、あなたは絶対的な伝説です。私はこれを理解しようと数時間と数日間を費やしました。 –

1

という理由だけで、私は私の答えを投稿します。

jQuery.dataまたはjavascript dom dataSetsを使用して任意のデータを格納できます。あなたのページに<circle>要素を持つ他のSVGを持っていない限り、すべて<circle>要素を繰り返し処理し、配列からデータを得ることができます。索引は一致しますが、データ索引を保護手段として使用できます。

かなりクールです。これが古くても、この代替案が誰かを助けるかもしれない。

+1

onMarkerClickイベントが突然停止してしまいました。これは非常に役に立ちました。ありがとう –

関連する問題