Question

我一直非常成功地使用jVectorMap--这是一个用于显示交互式地图的精彩包！

在这种情况下，我只希望某些区域可供选择，并且似乎没有选项将区域设置为活动/非活动状态。因此，我设置“regionsSelectable = false”，然后将“selectedRegions”设置为我想要激活的那些。

这样可以正常工作（仅显示“活动”区域的正确悬停属性等） - 在iOS中有一个例外。在那里，需要两次“点击”（触摸）才能调用“onRegionClick”处理程序。在第一次单击时，“selectedHover”属性设置正确，但“handleRegion”永远不会被调用。第二次单击，调用“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);
    ...
}

所需要的是“激活”仅少数几个区域的方法，或解决这种双击问题的方法。

Answer 1

我知道这是一个有点过时的问题，但对于像我这样的人来说，这是一个关于iOS问题的黑客攻击，在搜索这个问题时遇到了这个问题。

正如您已经注意到的那样，iPad / iPhone正在模拟悬停，首先是“点按”..然后点击第二个“点按”。

因此，为了解决这个尴尬的行为，我们将遵循（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设备）。基本上我们阻止工具提示显示，而不是我们选择悬停（tapped）国家，聚焦它并将其代码存储在全局变量中。

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

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

Answer 2

实际上，你应该检查一下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'
                    }
                }
            });
        }
    },
...

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

2 个答案: