1

我一直在非常成功地使用 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);
    ...
}

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

4

2 回答 2

1

我知道这是一个有点过时的问题，但是对于像我这样的其他人来说，这是一个围绕 iOS 问题的 hack，他们在寻找一些 hack 时遇到了这个问题。

正如您已经注意到的，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'
     }]
 });

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

在第二次点击时，我们通过将当前代码与最后一个值进行比较来检测国家是否发生了变化，在这种情况下，取消选择先前选择的国家并选择新的国家。

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

于 2014-09-29T11:02:41.293 回答
1

实际上，您应该检查 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'
                    }
                }
            });
        }
    },
...
于 2015-12-16T20:29:50.893 回答