JQVMap Click功能

Question

这是一个非常简单的问题,我不是网络专业人士.我需要创建一个交互式地图.我正在使用JQVMap.现在我需要点击区域,它将回调状态的URL.我在网站上给出了作为示例给出的功能和功能.但我不知道如何设置状态和URL的链接.

jQuery(document).ready(function() {
    jQuery('#vmap').vectorMap({
        map: 'usa_en',
        backgroundColor: '#ffffff',
        color: '#333333',
        hoverColor: '#af090f',
        selectedColor: '#0076a3',
        enableZoom: true,
        showTooltip: true,
        scaleColors: ['#C8EEFF', '#006491'],
        onRegionClick: function(element, code, region)
        {
            var message = 'You clicked "'
                + region 
                + '" which has the code: '
                + code.toUpperCase();

            alert(message);
        }
    });
});

Answer 1

onRegionClick回调包含构建动态URL所需的一切.它返回click事件本身,一个代表您单击的区域的2位数代码,以及您单击的区域的全名.例如,如果你使用美国地图并点击了科罗拉多州,你就会回来(regionClickEvent,'co','Colorado')

在第一个例子中,我在点击的区域中构建了一个动态URL,并将其重定向到那里.如果状态名称或代码不是URL的一部分,您可以执行类似第二个示例的操作,您可以在其中检查单击的区域并相应地处理它.

您需要更新URL以满足您的需求,但希望这会给您带来想法.

**ex.使用该地区即时建立网址**

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml");
    }
})

**ex.检查被点击的区域并根据其他规则重定向**

$('#vmap')
    .vectorMap({
    map: 'usa_en',
    onRegionClick: function (event, code, region) {
        switch (code) {
        case "co":
            window.location.replace("http://www.google.com");
            break;
        case "ca":
            window.location.replace("http://www.yahoo.com");
            break;
        case "tx":
            window.location.replace("http://www.bing.com");
            break;
            }
        },
    onRegionOver: function (event, code, region) {
       document.body.style.cursor = "pointer";
        },
    onRegionOut: function (element, code, region) {
           document.body.style.cursor = "default";
        }
})

在更新的游标上...如果您不想在每个状态上执行此操作,您可以像我们在onRegionClick上那样执行相同的检查,并检查代码并查看它是否是您要显示该样式的状态光标在上.
或者,如果存在您不希望显示为可点击状态的状态,则可以在此事件触发之前终止该事件.

onRegionOver: function (event, code, region) {
     if (code == "tx") 
          event.preventDefault();
     else 
          document.body.style.cursor = "pointer";
},

无论如何,希望这会有所帮助.