5

jqvmapと呼ばれるサイト用のオープンソースのベクターマップがあります

問題は、iPadまたはiPhoneブラウザを使用するとクリックが正しく処理されないことです。ファーストタッチにより、onRegionOverイベントが発生します。2回目のタッチにより、onRegionClickイベントが発生します。

クリックするとiOSで動作するようにonRegionOverを変更するにはどうすればよいですか？

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegion: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        var message = 'You clicked "'
            + region
            + '" which has the code: '
            + code.toUpperCase();

        alert(message);
    }
});
4

1 に答える 1

8

これが私がそれについて行く方法です。

まず、使用しているデバイスの種類（Ipad、Iphone、Droidなど）を検出する関数を作成することから始めます。 

function testDevice(){
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) {
        return true;
    }else{
        return false;
    }
}

次に、regionClickイベントとregionOverイベントの両方を設定します。

jQuery('#vmap').vectorMap(
{
    map: 'world_en',
    backgroundColor: '#a5bfdd',
    borderColor: '#818181',
    borderOpacity: 0.25,
    borderWidth: 1,
    color: '#f4f3f0',
    enableZoom: true,
    hoverColor: '#c9dfaf',
    hoverOpacity: null,
    normalizeFunction: 'linear',
    scaleColors: ['#b6d6ff', '#005ace'],
    selectedColor: '#c9dfaf',
    selectedRegion: null,
    showTooltip: true,
    onRegionClick: function(element, code, region)
    {
        if(!testDevice()){ //not mobile device
            var message = 'You clicked "'
            + region
            + '" which has the code: '
            + code.toUpperCase();

            alert(message);
        }
    },
    onRegionOver: function(element, code, region)
    {
        if(testDevice()){ //mobile device
            var message = 'You clicked "'
            + region
            + '" which has the code: '
            + code.toUpperCase();

            alert(message);
        }
    }
});

デモ：

http://jsfiddle.net/V79hw/5/

お役に立てれば！

于 2012-12-06T00:51:46.890 に答える