jqvmap RegionClick用iPhone/iPad

有一個開源的矢量地圖名爲jqvmap網站jqvmap RegionClick用iPhone/iPad

的問題是，使用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); 
    } 
});

來源

2012-12-05 Константин Рекунов

這就是我該如何去做的。

首先，創建一個檢測正在使用的設備類型（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); 
     } 
    } 
});

DEMO：

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

希望這有助於！

來源

2012-12-06 00:51:46 Dom

謝謝！嘗試了更多的困難方法。 –

jqvmap RegionClick用iPhone/iPad

回答

相關問題