世界地图数组JavaScript [英] Map of the world array javascript
问题描述
我有一张SVG世界地图，其中的元素由以下结构组成
< path
inkscape：connector-curvature = 0
id = AF
data-name =阿富汗
data-id = AF
d = m 1369.9,333.8 -5.4,0 -3.8，-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6，-2.1 -1，-5.4 -1.6，-0.3 0，-2 -3.2，-1.5- 1.7,2.3 0.2,2.6 -0.6,0.9 -3.2，-0.1 -0.9,3 -2.1，-1.3 -3.3,2.1 -1.8，-0.8 -4.3，-1.4 -2.9,0 -1.6，-0.2 -2.9， -1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9，-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7 ，5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3，-0.9 3.3,0.8 0.9，-1.4 3.8,0.5 6.6，-2.6 -0.8，-5.4 2.3，-3.6 4,0 0.2， -1.7 4，-0.9 2.1,0.6 1.7，-1.8 -1.1，-3.8 1.5，-3.8 3，-1.6 -3，-4.2 5.1,0.2 0.9，-2.3 -0.8，-2.5 2，-2.7 -1.4， -3.2 -1.9，-2.8 2.4，-2.8 5.3，-1.3 5.8，-0.8 2.4，-1.2 2.8，-0.7 -1.4，-1.9 z
style = fill：＃f2f2f2; fill-rule： Evenodd />
我正试图做到这一点，以便当我单击随机生成的国家/地区时，用户第一次正确单击它，该国家/地区将变成白色，并会询问另一个随机生成的国家/地区。 （我需要尝试使其在用户单击正确的国家（仅在刷新页面时才起作用）时随机起作用）。
我有一个功能会将颜色更改为白色，但这并不取决于所提出的问题。
function onClickHandler（elem）{
var country_id = elem.id
var color = #ffffff;
elem.style.fill =颜色；
}
正在使用的点击功能：
<路径
inkscape：connector-curvature = 0
id = Algeria
onmouseover = displayName（'Algeria' ）
onclick = onClickHandler（this）
我想过的一个可能的解决方案的确是，在地图的每个部分上创建一些不可见的文本框，然后仅测试数组项是否与单击的文本框匹配？但是我不确定如何在代码中实现它。也许我可以将每个路径标签包装在另一个标签内，然后定位该标签类型？以下是我到目前为止所做的事情：
var items = Array（ Afghanistan， Algeria， Australia ，厄瓜多尔，巴林，不丹）；
函数shuffle（array）{
var currentIndex = array.length，temporalValue，randomIndex;
while（0！== currentIndex）{
randomIndex = Math.floor（Math.random（）* currentIndex）;
currentIndex-= 1;
临时值=数组[currentIndex];
array [currentIndex] = array [randomIndex];
array [randomIndex] =临时值；
}
返回数组；
}
函数nextQuestion（）{
items = shuffle（items）;
objQ = items [0];
返回objQ;
}
var e; // event
var i; //索引计数器
//试图将隐藏的文本框放在每个答案上，如果数组与单击区域匹配，则将其突出显示为白色。
函数checkAnswer（）{
for（i = 0; i< items.length; i ++）{
if（document.getElementById（'ansfield'）。value = = onClickHandler（this））{
onClickHandler（this）.fill = white;
//不认为这是正确的。
//试图让它变成一个匹配的国家
//将匹配的名称改为白色。
//可能需要某种onclick事件...
}
}
}
这似乎与您的其他问题有关？：
I have an SVG map of the world with elements made up of the following structure
<path
inkscape:connector-curvature="0"
id="AF"
data-name="Afghanistan"
data-id="AF"
d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z"
style="fill:#f2f2f2;fill-rule:evenodd" />
I'm trying to make it so that when I click on a country that is randomly generated, if the user correctly clicks on it first time, that country will turn white and another randomly generated country will be asked. (I need to try to get this to randomly work when a user clicks the correct country at the moment it only works when I refresh the page).
I have a function that will change the colour to white, however it doesn't depend on the question that is being asked. Developing that dependency is where I'm stuck.
function onClickHandler(elem){
var country_id = elem.id
var colour = "#ffffff";
elem.style.fill = colour;
}
click function being used:
<path
inkscape:connector-curvature="0"
id="Algeria"
onmouseover="displayName('Algeria')"
onclick="onClickHandler(this)"
One possible solution I've thought of is, make some invisible textboxes on each piece of the map, and then just test to see if the array item matches the clicked on textbox? But i'm not sure how I could implement it in code. Maybe I can wrap each path tag inside another tag and target that type of tag?? Below is what I've done so far:
var items = Array("Afghanistan", "Algeria", "Australia", "Ecuador", "Bahrain", "Bhutan");
function shuffle(array){
var currentIndex = array.length, temporaryValue, randomIndex;
while(0 !== currentIndex){
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
function nextQuestion(){
items = shuffle(items);
objQ = items[0];
return objQ;
}
var e; //event
var i; //index counter
// Aim to try and put hidden text box on each answer and if the array matches the clicked area highlight it white.
function checkAnswer(){
for(i = 0; i < items.length; i++){
if(document.getElementById('ansfield').value == onClickHandler(this)){
onClickHandler(this).fill = "white";
// don't think this is correct.
//Trying to get it to turn the country
//with the matched name to the array white.
//Probably need some sort of onclick event...
}
}
}
This seems related to your other question?: Getting an SVG map to change color on click
So I take my answer from that question as a starting point and try to give a minimal reproducible example (https://stackoverflow.com/help/minimal-reproducible-example)
It would work smoother with more SVG paths, so if you supply those I can also add them.
In short what happens:
- When you click the button, it picks a random country path and puts its name into the span in the h4 tag
- When you click a country, if that country is the same as the one in the span in h4 tag then fill the country green, otherwise red.
- When you click the button again, loop all country paths and reset their fills to the initial grey
const targetSpan = document.querySelector('#target')
const allPaths = document.querySelectorAll('svg > path');
function displayName(elem){
console.log(elem.id)
}
allPaths.forEach(elem => elem.addEventListener('click', myFuncHandler));
function myFuncHandler(e){
const country_id = e.target.id
const thisCountry = e.target.getAttribute('data-name');
const colour = thisCountry == targetSpan.innerHTML ? "#004400" : "#8a0000";
e.target.style.fill = colour;
}
const startButton = document.querySelector('#startButton');
startButton.addEventListener('click', e => {
const randIndex = Math.floor(Math.random() * (allPaths.length));
const randCountry = allPaths[randIndex];
targetSpan.innerHTML = randCountry.getAttribute('data-name');
allPaths.forEach(elem => elem.style.fill = "#f2f2f2");
});
<button id="startButton">Start Game</button>
<h4>Please click on <span id="target"></span></h4>
<svg viewbox="250 250 1250 1000">
<path
inkscape:connector-curvature="0"
id="Algeria"
onmouseover="displayName(this)"
data-name="Algeria"
data-id="DZ"
d="m 1021,336.9 -3.6,0.4 -2.2,-1.5 -5.6,0 -4.9,2.6 -2.7,-1 -8.7,0.5 -8.9,1.2 -5,2 -3.4,2.6 -5.7,1.2 -5.1,3.5 2,4.1 0.3,3.9 1.8,6.7 1.4,1.4 -1,2.5 -7,1 -2.5,2.4 -3.1,0.5 -0.3,4.7 -6.3,2.5 -2.1,3.2 -4.4,1.7 -5.4,1 -8.9,4.7 -0.1,7.5 0,0.4 -0.1,1.2 20.3,15.5 18.4,13.9 18.6,13.8 1.3,3 3.4,1.8 2.6,1.1 0.1,4 6.1,-0.6 7.8,-2.8 15.8,-12.5 18.6,-12.2 -2.5,-4 -4.3,-2.9 -2.6,1.2 -2,-3.6 -0.2,-2.7 -3.4,-4.7 2.1,-2.6 -0.5,-4 0.6,-3.5 -0.5,-2.9 0.9,-5.2 -0.4,-3 -1.9,-5.6 -2.6,-11.3 -3.4,-2.6 0,-1.5 -4.5,-3.8 -0.6,-4.8 3.2,-3.6 1.1,-5.3 -1,-6.2 1,-3.3 z"
style="fill:#f2f2f2;fill-rule:evenodd" />
<path
inkscape:connector-curvature="0"
id="Afghanistan"
onmouseover="displayName(this)"
data-name="Afghanistan"
data-id="AF"
d="m 1369.9,333.8 -5.4,0 -3.8,-0.5 -2.5,2.9 -2.1,0.7 -1.5,1.3 -2.6,-2.1 -1,-5.4 -1.6,-0.3 0,-2 -3.2,-1.5 -1.7,2.3 0.2,2.6 -0.6,0.9 -3.2,-0.1 -0.9,3 -2.1,-1.3 -3.3,2.1 -1.8,-0.8 -4.3,-1.4 -2.9,0 -1.6,-0.2 -2.9,-1.7 -0.3,2.3 -4.1,1.2 0.1,5.2 -2.5,2 -4,0.9 -0.4,3 -3.9,0.8 -5.9,-2.4 -0.5,8 -0.5,4.7 2.5,0.9 -1.6,3.5 2.7,5.1 1.1,4 4.3,1.1 1.1,4 -3.9,5.8 9.6,3.2 5.3,-0.9 3.3,0.8 0.9,-1.4 3.8,0.5 6.6,-2.6 -0.8,-5.4 2.3,-3.6 4,0 0.2,-1.7 4,-0.9 2.1,0.6 1.7,-1.8 -1.1,-3.8 1.5,-3.8 3,-1.6 -3,-4.2 5.1,0.2 0.9,-2.3 -0.8,-2.5 2,-2.7 -1.4,-3.2 -1.9,-2.8 2.4,-2.8 5.3,-1.3 5.8,-0.8 2.4,-1.2 2.8,-0.7 -1.4,-1.9 z"
style="fill:#f2f2f2;fill-rule:evenodd" />
</svg>
Demo:
这篇关于世界地图数组JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
