1

私は jVectorMap をうまく使ってきました。インタラクティブなマップを表示するための素晴らしいパッケージです!

この場合、一部のリージョンのみを選択可能にしたいのですが、リージョンをアクティブ/非アクティブに設定するオプションはないようです。その代わりに、「regionsSelectable=false」を設定してから、「selectedRegions」をアクティブにしたいものに設定します。

これは正常に機能します (「アクティブな」領域に対してのみ正しいホバー属性などを表示します) - iOS では 1 つの例外があります。そこでは、「onRegionClick」ハンドラーが呼び出されるのに 2 回の「クリック」(タッチ) が必要です。最初のクリックで、「selectedHover」属性は正しく設定されますが、「handleRegion」は呼び出されません。もう一度クリックすると、「handleRegion」が呼び出されます。

初期化コードは次のようになります。

map = new jvm.WorldMap({
    container: $('#mapdiv'),
    map: 'world_mill_en',
    regionsSelectable: false,
    regionStyle: {
        initial: { fill: '#0086d0' },
        hover: { "fill-opacity": 1.0 },
        selected: { fill: '#003a6a' },
        selectedHover: { fill: '#ff7a00' }
    },
    onRegionClick: handleRegion,
    selectedRegions:["CN","RU","US"],
    ...
});

function handleRegion(e,cc) {
    alert("cc="+cc);
    ...
}

必要なのは、いくつかの領域のみを「アクティブ化」する方法、またはこの 2 回のクリックの問題を回避する方法です。

4

2 に答える 2

1

実際には、onRegionTipShow を確認する必要があります。

...
handleIOSClick = function (e, el, code) {
        if (istouch) {
            var mapObject = $(map).vectorMap('get', 'mapObject');
            map.regions[code].element.setSelected(true);
            e.preventDefault();
        }
    },

    CreateMap = function () {
        if (typeof $(map) !== 'undefined'){
            $(map).width(700);
            $(map).height(400);
            mapObject = $(map).vectorMap({
                map: 'us_lcc_en',
                onRegionClick: regionClicked,
                onRegionTipShow: handleIOSClick,
                backgroundColor: "inherit",
                regionStyle: {
                    initial: {
                        fill: '#477294'
                    }
                }
            });
        }
    },
...
于 2015-12-16T20:29:50.893 に答える
1

これは少し時代遅れの質問であることは知っていますが、これに関するハックを探しているときにこの質問に出くわした私のような他の人のための iOS の問題に関するハックがあります。

すでに指摘したように、iPad/iPhone は最初の「タップ」でホバーをエミュレートし、2 番目の「タップ」でクリックします。

したがって、この不機嫌な動作を修正するには、次のようにします ( fiddleの例)

var lastCode = "";
var iOS = /(iPad|iPhone|iPod)/g.test( navigator.userAgent );
$('#world-map').vectorMap({
     map: 'world_mill_en',
     backgroundColor: 'green',
     normalizeFunction: 'polynomial',
     regionsSelectable: true,
     regionsSelectableOne: true,
     zoomOnScroll: true,
     zoomButtons: true,
        regionStyle: {
            initial: {
                fill: "white",
                "fill-opacity": 1,
                stroke: "none",
                "stroke-width": 0,
                "stroke-opacity": 1
            },
            hover: {
                fill: "white",
                "fill-opacity": 1
            },
            selected: {
                fill: "#EC6602",
                "fill-opacity": 1
            },
            selectedHover: {
                fill: "#EC6602",
                "fill-opacity": 1
            }
        },


    onRegionClick: function(e, country){
        if (lastCode && lastCode == country) {
            e.preventDefault();
            return;
        }
        var map = $("#world-map").vectorMap("get", "mapObject");
        $("#world-map").vectorMap("set", "focus", country);
        map.setScale(2);

        if(country=="US" || country=="RU") {
            map.setScale(1);  
        }
        lastCode = country;
    },
    onRegionLabelShow: function (e, el, country) {
        if (iOS) {
            e.preventDefault();
            var map = $("#world-map").vectorMap("get", "mapObject");
            if (lastCode) {
                map.regions[lastCode].element.setSelected(false);
            }
            map.regions[country].element.setSelected(true);
            $("#world-map").vectorMap("set", "focus", country);
            map.setScale(2);

            if(country=="US" || country=="RU") {
                map.setScale(1);  
            }
            lastCode = country;
        }
    },
     markers: [{
         latLng: [37.7833, -122.4167],
         name: 'San Francisco'
     }]
 });

つまり、onRegionLabelShow 機能をカスタム動作で上書きしています (iOS デバイスのみ)。基本的に、ツールチップが表示されないようにしています。代わりに、ホバーされた (タップされた) 国を選択し、フォーカスして、そのコードをグローバル変数に保存します。

2 回目のタップでは、現在のコードと最後の値を比較して国が変更されたかどうかを検出します。その場合、以前に選択した国の選択を解除し、新しい国を選択します。

必要に応じて解像度を調整するのはかなり簡単です。

于 2014-09-29T11:02:41.293 に答える