移动设备上的jVectorMap需要2次点击

jVectorMap on mobile requires 2 clicks

本文关键字：需要 2次 jVectorMap 移动      更新时间：2023-09-26

我一直在使用jVectorMap非常成功 - 这是一个显示交互式地图的绝佳软件包！

在这种情况下，我只希望某些区域是可选的，并且似乎没有设置活动/非活动区域的选项。 因此，我设置了"regionSelectable=false"，然后将"selectedRegions"设置为我想要激活的区域。

这工作正常（仅显示"活动"区域的正确悬停属性等）——在 iOS 中有一个例外。 在那里，需要两次"单击"（触摸）才能调用"onRegionClick"处理程序。 第一次单击时，"选定悬停"属性设置正确，但"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);
    ...
}
需要的要么是

仅"激活"几个区域的方法，要么是解决此双击问题的方法。

我知道

这是一个有点过时的问题，但是对于像我这样的其他人来说，这里有一个围绕iOS问题的黑客，他们在搜索一些技巧时遇到了这个问题。

正如您已经注意到的，iPad/iPhone正在模拟第一个"点击"的悬停......并使用第二个"点击"单击。

因此，为了解决这种不良行为，我们将执行以下操作（小提琴示例）

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'
     }]
 });

简而言之，我们将使用自定义行为覆盖区域标签显示功能（仅适用于iOS设备）。基本上，我们阻止显示工具提示，而不是选择悬停（点击）的ccountry，聚焦它并将其代码存储在全局变量中。

在第二次点击时，我们通过比较当前代码与最后一个值来检测国家/地区是否已更改，在这种情况下，取消选择先前选择的国家/地区并选择新国家/地区。

根据您的需求调整分辨率应该相当容易。

实际上，您应该检查RegionTipShow：

...
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'
                    }
                }
            });
        }
    },
...
相关文章：