JQVMap 点击功能

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 所需的一切。它返回单击事件本身、代表您单击的区域的 2 位代码以及您单击的区域的全名。例如，如果您使用美国地图并单击科罗拉多州，您将返回 (regionClickEvent,'co','Colorado')

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

您需要根据自己的需要更新 URL，但希望这能给您带来启发。

* * ex.使用区域动态构建 url * *

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

无论如何，希望这会有所帮助。