Existe uma maneira fácil de criar variáveis ??dinâmicas com JavaScript?
-
18-09-2019 - |
Pergunta
Eu construí um mapa google data-driven com diferentes ícones que são atribuídos ao mapa, dependendo do tipo de item localizado. Então, se eu tenho 5 tipos de marco, e cada um recebe um ícone diferente (loja, biblioteca, hospital, etc.) - o que eu gostaria de fazer é gerar o ícone do Google objetos dinamicamente. Eu estava pensando em algo como isto:
types = array('hospital','church','library','store',etc);
var i=0;
while (i<=types.length) {
var landmark + i = new google.maps.Icon();
landmark.image = "icon" + i + ".png";
i++;
}
No entanto, como você provavelmente já adivinhou, isso não funciona. Eu também tentei usar eval, como este:
while (i<=types.length) {
doIcon(i);
i++;
}
function doIcon(i){
eval("var landmark" + i + " = new.google.maps.Icon();");
return eval("landmark" + i);
}
mas não funcionou either-- eu apreciaria qualquer ponteiros na geração de variáveis ??JavaScript dinamicamente. Tem que ser js puro, eu poderia fazê-lo em PHP, mas isso não é uma opção aqui.
Obrigado!
Solução
É muito fácil de fazer: object["variablename"] = whatever;
Assim, por exemplo, você poderia ter um objeto: var Landmarks = {}
e você pode adicionar-lhe assim:. Landmarks["landmark" + i] = new google.maps.Icon();
e passá-lo dessa maneira
Se você precisar dessas variáveis ??para ser Global (por que você faria?) Você pode acessar o objeto global usando diretamente window
.
Outras dicas
Se você estiver indo para fazê-lo usando um objeto declarado como Landmark["landmark" + i]
, você realmente pode também usar uma matriz de índice em vez de um associativa, é muito mais fácil para a iteração. Objetos não são realmente utilizados com propriedades indexadas porque Arrays fazer um trabalho muito melhor do que:
var myObj = // object version
{
"item0": "blah",
"item1": "blah"
// etc
}
var myArr = // array version
[
"blah",
"blah"
// etc
]
Muito mais sensato usar o array:
landmarks = []; // new array
types = array('hospital','church','library','store',etc);
var i=0;
while (i<=types.length) {
landmarks.push(new google.maps.Icon());
landmarks[i].image = "icon" + i + ".png";
i++;
}
Faz mais sentido fazê-lo dessa forma e for...in
laços em objetos pode obter um confuso pouco com propriedades prototipados sendo enumeráveis, etc.
Se você está tentando fazer uma variável global, adicioná-lo ao objeto de janela:
var myCustomVar = "landmark" + i;
window[myCustomVar] = new google.maps.Icon();
alert(landmark0);
Mas isso seria poluir o namespace global com muitas variáveis ??desnecessárias. Então você ainda estaria melhor com uma matriz:
window.landmarks = [];
landmarks.push(new google.maps.Icon());
// etc...
Apenas para responder sua pergunta diretamente (embora note por favor que essa não é a solução que você deseja. Confira as outras respostas. Este é apenas para documentação! ), aqui está uma cópia e colar a partir de um console JavaScript:
> window["myNamedVar"] = "Hello, World!";
> console.log(myNamedVar);
"Hello, World!"
Você seria melhor fora de criação de um objeto javascript que você pode usar um pouco como uma matriz associativa é usado em PHP:
var types = ['hospital','church','library','store'];
var landmarks= {};
for (var i in types) {
landmarks[types[i]]= new google.maps.Icon();
landmarks[types[i]].image = "icon" + i + ".png";
}
alert(landmarks['hospital'].image); // displays "icon0.png"
Você realmente precisa dessas variáveis? você não pode fazer com esta:
var types = ['hospital','church','library','store'];
for(var i =0; i < types.length; i += 1) (new google.maps.Icon()).image = "icon" + i + ".png";
As modificações feito com base no comentário:
ícone nome do padrão alterado de ícone + Índice + .png ao ícone + tipo + .png e salvar os resultados do loop.
types = ['hospital','church','library','store'];
var landmarks = {};
// images names are of the form icon + type + .png
function createIcon(type)
{
var icon = new google.maps.Icon();
icon.image = "icon" + type + ".png";
return icon;
}
// mapping of landamarks by type and icon
for (var i = 0, len = types.length; i < len; i++)
{
landmarks[types[i]] = createIcon(types[i]);
}
O resultado é: { hospital: ícone, Igreja: ícone, ... }
onde ícone é um google map que tem um atributo de imagem que é uma seqüência da forma "ícone {type} .png", por exemplo, iconhostpital.png, iconchurch.png.
Para usar o landmarks.type
ícones de gravação onde tipo é um dos nomes na matriz de tipos, por exemplo, landmarks.hospital
.
se os nomes de imagem são do ícone forma número + + PNG, e o número de cada tipo é equivalente ao seu índice na matriz substituir o CreateIcon chamada (tipo [i]) para CreateIcon (i).