4

とても簡単な質問です。私は Web の専門家ではありません。インタラクティブ マップを作成する必要があります。JQVMapを使用しています。ここで、地域をクリックする必要があります。これにより、州の URL がコールバックされます。サイトで例として与えられた関数を与えています。しかし、状態と URL を使用してリンクを設定する方法がわかりません。

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverColor: '#af090f',
        selectedColor: '#0076a3',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        onRegionClick: function(element, code, region)
        {
            var message = 'You clicked "'
                + region 
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
        }
    });
});
4

1 に答える 1

7

onRegionClick コールバックには、動的 URL を構築するために必要なものがすべて含まれています。クリック イベント自体、クリックした地域を表す 2 桁のコード、およびクリックした地域の完全な名前を返します。たとえば、米国の地図を使用してコロラド州をクリックすると、(regionClickEvent,'co','Colorado') が返されます。

最初の例では、クリックされてそこにリダイレクトされた領域から動的 URL を作成しました。州の名前またはコードが URL の一部にならない場合は、2 番目の例のように、クリックされた地域を確認し、それに応じて処理することができます。

ニーズに合わせて URL を更新する必要がありますが、これでアイデアが得られることを願っています。

* * ex.リージョンを使用してその場で URL を構築する * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml");
    }
})

* * ex.クリックされた領域を確認し、他のルールに基づいてリダイレクトする * *

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        switch (code) {
        case "co":
            window.location.replace("http://www.google.com");
            break;
        case "ca":
            window.location.replace("http://www.yahoo.com");
            break;
        case "tx":
            window.location.replace("http://www.bing.com");
            break;
            }
        },
    onRegionOver: function (event, code, region) {
       document.body.style.cursor = "pointer";
        },
    onRegionOut: function (element, code, region) {
           document.body.style.cursor = "default";
        }
})

更新されたカーソルについて...すべての状態で実行したくない場合は、onRegionClick と同じチェックを行い、コードをチェックして、そのスタイルを表示したい状態かどうかを確認します。カーソルを合わせます。
または、クリック可能として表示したくない状態がある場合は、このように発生する前にイベントを強制終了できます。

onRegionOver: function (event, code, region) {
     if (code == "tx") 
          event.preventDefault();
     else 
          document.body.style.cursor = "pointer";
},

とにかく、これが役立つことを願っています。

于 2012-09-26T23:25:31.737 に答える