JQVMap点击函数

Question

这是一个非常简单的问题，我不是网络专业人士。我需要创建一个交互式地图。我正在使用JQVMap。现在我需要单击region，它将回调该州的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回调包含构建动态onRegionClick所需的所有内容。它返回单击事件本身、表示您单击的区域的两位数代码以及您单击的区域的全名。例如，如果您使用美国地图并单击科罗拉多州，您将返回(regionClickEvent，'co'，' Colorado ')

在第一个示例中，我在被单击的区域之外构建了一个动态url，并将您重定向到那里。如果州名称或代码不是URL的一部分，您可以执行类似于第二个示例的操作，检查单击了哪个区域并相应地处理它。

您将需要更新URL以满足您的需求，但希望这能为您提供帮助。

* * ex.Use动态构建url的地域* *

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

* *根据其他规则对被点击的地域进行ex.Check跳转* *

$('#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";
        }
})

在更新的光标stuff...if上，你不想在每个状态下都这样做，你可以像onRegionClick一样做同样的检查，检查代码，看看它是否是你想要显示该样式光标的状态。

或者，如果您不想让某个状态显示为可单击状态，您可以在事件触发之前将其终止，如下所示。

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

不管怎样，希望这能帮上忙。