在 jVectorMap 中,如何 select 一个区域只有在满足条件的情况下?
In jVectorMap, how to select a region ONLY IF a condition is met?
我正在使用 jVectorMaps。默认情况下,它不允许选择区域除非 >>regionsSelected: true
这是我想要实现的目标:
当用户单击某个区域时,he/she 会收到从加载的 JSON 文件中提取的问题提示。如果问题的答案是正确的,我需要 ONLY 更改区域颜色。
到目前为止我的代码:
$(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();
}
}
}
});
},
});
});
我正在使用 jVectorMaps。默认情况下,它不允许选择区域除非 >>regionsSelected: true
这是我想要实现的目标:
当用户单击某个区域时,he/she 会收到从加载的 JSON 文件中提取的问题提示。如果问题的答案是正确的,我需要 ONLY 更改区域颜色。
到目前为止我的代码:
$(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();
}
}
}
});
},
});
});