这是一个非常简单的问题,我不是网络专业人士.我需要创建一个交互式地图.我正在使用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"; },
无论如何,希望这会有所帮助.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。