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，＆＃39; co＆＃39;＆＃39; Colorado＆＃39;）

在第一个例子中，我在点击的区域中构建了一个动态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";
},

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

JQVMap Click功能

1 个答案: