jVectorMap на мобильном устройстве требует 2 клика

Question

Я успешно использовал jVectorMap - это прекрасный пакет для отображения интерактивных карт!

В этом случае я хочу, чтобы некоторые регионы были доступны для выбора, и, похоже, нет возможности устанавливать регионы активными/неактивными. Поэтому вместо этого я устанавливаю «regionsSelectable = false», а затем устанавливаю «selectedRegions» тем, которые я хочу активировать.

Это работает отлично (с указанием правильных атрибутов наведения и т. Д. Только для «активных» регионов) - за одним исключением, в iOS. Там, чтобы обработать обработчик onRegionClick, требуется два клика (касания). При первом нажатии атрибуты «selectedHover» установлены правильно, но «handleRegion» никогда не вызывается. Вызывается второй клик и вызывается «handleRegion».

Initialization код выглядит следующим образом:

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); 
    ... 
} 

Что нужно либо способ «активировать» только несколько регионов, или способ решения этой проблемы две кнопки мыши.

Answer 1

Я знаю, что это немного устаревший вопрос, но вот взломать проблему iOS для других, подобных мне, которые столкнулись с этим вопросом во время поиска какого-то взлома.

Как вы уже отметили, iPad/iPhone эмулируют наведение с первым «краном» .. и нажмите со вторым «краном».

Так, чтобы исправить эту ackward поведение мы будем делать следующее (например, на 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). В основном мы предотвращаем показ всплывающей подсказки, и вместо этого мы выбираем зависающую (резьбовую) ccountry, фокусируя ее и сохраняя ее код в глобальной переменной.

Во втором касании мы обнаруживаем, изменилась ли страна, сравнив текущий код с последним значением и в этом случае не выбрав ранее выбранную страну и выбрав новый.

Должно быть достаточно легко адаптировать разрешение к вашим потребностям.

Answer 2

на самом деле, вы должны проверить 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' 
        } 
       } 
      }); 
     } 
    }, 
...