5

有一个用于站点的开源矢量地图，称为 jqvmap

问题是使用 ipad 或 iphone 浏览器处理点击不正确。第一次触摸会导致 onRegionOver 事件。第二次触摸会导致 onRegionClick 事件。

我们如何修改 onRegionOver 以使其在 ios 上作为点击工作？

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 回答