这是一个非常简单的问题,我不是网络专业人士.我需要创建一个交互式地图.我正在使用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); } }); });
解决方法
onRegionClick回调包含构建动态URL所需的一切.它返回click事件本身,一个代表您单击的区域的2位数代码,以及您单击的区域的全名.例如,如果你使用美国地图并点击了科罗拉多州,你就会回来(regionClickEvent,’co’,’Colorado’)
在第一个例子中,我在点击的区域中构建了一个动态URL,并将其重定向到那里.如果状态名称或代码不是URL的一部分,您可以执行类似第二个示例的操作,您可以在其中检查单击的区域并相应地处理它.
您需要更新URL以满足您的需求,但希望这会给您带来想法.
* * ex.使用该地区即时建立网址* *
$('#vmap') .vectorMap({ map: 'usa_en',onRegionClick: function (event,region) { window.location.replace("http://geology.com/state-map/" + region.toLowerCase() + ".shtml"); } })
* * ex.检查被点击的区域并根据其他规则重定向* *
$('#vmap') .vectorMap({ map: 'usa_en',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,region) { document.body.style.cursor = "pointer"; },onRegionOut: function (element,region) { document.body.style.cursor = "default"; } })
在更新的游标上…如果您不想在每个状态上执行此操作,您可以像我们在onRegionClick上那样执行相同的检查,并检查代码并查看它是否是您要显示该样式的状态光标在上.
或者,如果存在您不希望显示为可点击状态的状态,则可以在此类触发之前终止该事件.
onRegionOver: function (event,region) { if (code == "tx") event.preventDefault(); else document.body.style.cursor = "pointer"; },
无论如何,希望这会有所帮助.