0

私はJQVMAPを使用して米国の地図を生成しています。プラグインには onRegionClick コールバックがあります。この関数内でクリックされた状態にズームインしようとしています。onClick に返された SVG パスを viewBox 座標に変換する方法については、ある程度のアイデアがありますが、変換に問題があります。これが私がこれまでに持っているものです。

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function(element, code, region)
        {
            //$('#vmap > svg')[0].setAttribute('viewBox', vmlPath);
            console.log(region.path);
            console.log(region.name);
        }
    });
});
</script>

ライブ デモへのリンク。SVG パスを viewBox 座標に変換するにはどうすればよいですか? 私はこれを正しい方法で行っていますか？または、これを行うより良い方法はありますか？私の最終的な目標は、状態 onRegionClick にズームインすることです。

4

2 に答える 2

1

jqvmap の派生元であるjVectorMapを使用できます。そのAPIにはfocusOn、マップ上の指定された領域にズームするメソッドがあります。地域は、座標または地域コードで指定できます。

于 2012-11-27T09:54:18.157 に答える
1

あなたが達成しようとしていることは非常に困難です。SVG パス (特に、扱っているパスのサイズ) は解析が非常に困難です。おそらくパスから解析できる最も意味のあるものは、最初の値です (値はコンマで区切られています)。この値は、「m」または「M」で始まります。小文字の m は相対開始点、大文字の M は絶対開始点です。

そうは言っても、パスの開始位置がわかったら、viewBox の設定を開始できます。ただし、パスの幅と高さはまだわかりません (テキサスのパスはロードアイランドのパスよりも大きい)。したがって、viewBox の開始点を設定することはできますが、それをどのくらいの大きさにすればよいかわかりません。その情報を解析するのは悪夢です!

最良の方法は、状態ごとに viewBox が何であるかを自分で調べ、それを各jquery.vmap.usa.js状態のオブジェクト情報に含めることです。したがって、各オブジェクトには、パス、名前、およびビュー ボックスが含まれます。onRegionClick次に、 を呼び出して、イベントでそれを取得できますregion.viewBox。

それ以外では、これは私が思いつくことができる最高のものです：

var showAll = false;
    jQuery(document).ready(function () {
        jQuery('#vmap').vectorMap(
    {
        map: 'usa_en',
        backgroundColor: '#a5bfdd',
        borderColor: '#818181',
        borderOpacity: .50,
        borderWidth: 1,
        color: '#f4f3f0',
        enableZoom: false,
        hoverColor: '#c9dfaf',
        hoverOpacity: null,
        normalizeFunction: 'linear',
        scaleColors: ['#b6d6ff', '#005ace'],
        selectedColor: '#c9dfaf',
        selectedRegion: null,
        showTooltip: true,
        onRegionClick: function (element, code, region) {
            $('path').each(function () {
                if (showAll) {
                    $(this).show();
                } else {
                    $(this).hide();
                }
            });
            if (showAll) { showAll = false; } else { showAll = true; }

            var id = '#jqvmap1_' + code;
            $(id).show();
        }
    });
    });
于 2012-11-21T17:05:35.317 に答える