[英]How to show tooltip only if a region is clicked in jVectorMap, and let it open?
[英]In jVectorMap, how to select a region ONLY IF a condition is met?
我正在使用jVectorMaps。 默认情况下,不允许选择区域,除非>> regionsSelected: true
这是我要实现的目标:
当用户单击区域时,会提示他/她从加载的JSON文件中提取一个问题。 仅在问题答案正确的情况下,我才需要更改区域颜色。
到目前为止,我的代码:
$(function(){
map = new jvm.Map({
container: $('#map'),
map: 'world_mill_en',//map file
backgroundColor: ['#1E90FF'],//map background color
regionsSelectable:true,//this needs to be true to be able to select a region
onRegionClick: function(event, code){
var map = $('#map').vectorMap('get', 'mapObject');
var regionName = map.getRegionName(code);
$.getJSON('../countries.json', function(data) {
for (var i in data.country) {
if (data.country[i].name === regionName){
var answer = prompt(data.country[i].question, "Type your answer here.");
if(data.country[i].answer === answer){
alert("Correct!");
}else{
alert("Wrong. Try again.");
}
}
}
});
},
});
});
我认为我必须找到一种方法,在满足if(data.country[i].answer === answer)
条件后,动态更改regionsSelectable
的属性值。 如果不是,那么regionsSelectable
的属性值应保持为false
。
我是一个初学者,因此任何批评都值得欢迎,无论如何,我在这里可能还差得远! :)
试试看..
$(function(){
map = new jvm.Map({
container: $('#map'),
map: 'world_mill_en',//map file
backgroundColor: ['#1E90FF'],//map background color
regionsSelectable:true,//this needs to be true to be able to select a region
onRegionClick: function(event, code){
var map = $('#map').vectorMap('get', 'mapObject');
var regionName = map.getRegionName(code);
$.getJSON('../countries.json', function(data) {
for (var i in data.country) {
if (data.country[i].name === regionName){
var answer = prompt(data.country[i].question, "Type your answer here.");
if(data.country[i].answer === answer){
map.setSelectedRegions(code);;
}else{
map.clearSelectedRegions();
}
}
}
});
},
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.