Question

我已经构建了一个数据驱动的谷歌地图，其中包含不同的图标，这些图标会根据所找到的项目类型分配给地图。因此，如果我有5种类型的地标，每个都有不同的图标（商店，图书馆，医院等） - 我想要做的是动态生成谷歌图标对象。我在想这样的事情：

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++;
    }

然而，正如你可能已经猜到的那样，这不起作用。我也尝试过使用eval，就像这样：

while (i<=types.length) {
        doIcon(i);
        i++;
    }   

    function doIcon(i){ 
        eval("var landmark" + i + " = new.google.maps.Icon();");
        return eval("landmark" + i);
    }

但它也没有用 - 我很感激任何关于动态生成javascript变量的指针。它必须是纯粹的js，我可以用PHP来做，但这不是一个选项。

谢谢！

Answer 1

这很容易做到：object["variablename"] = whatever;

例如，你可以有一个对象：var Landmarks = {}，你可以像这样添加它：Landmarks["landmark" + i] = new google.maps.Icon();并以这种方式传递它。

如果您需要这些变量 global （为什么会这样？），您可以使用window直接访问全局对象。

Answer 2

如果您要使用Landmark["landmark" + i]之类的声明对象来实现它，您实际上也可以使用索引数组而不是关联数，这对于迭代来说要容易得多。对象并没有真正用于索引属性，因为Arrays做得更好：

var myObj =           // object version
{
   "item0": "blah",
   "item1": "blah"
   // etc
}
var myArr =           // array version
[
   "blah",
   "blah"
   // etc
]

使用数组更明智：

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++;  
}

这样做更有意义，对象上的for...in循环可能会因为可枚举的原型属性而变得有点混乱等。

如果您尝试将变量设为全局变量，请将其添加到窗口对象：

var myCustomVar = "landmark" + i;
window[myCustomVar] = new google.maps.Icon();

alert(landmark0);

但是这会使用许多不必要的变量来污染全局命名空间。所以你对数组仍然会更好：

window.landmarks = [];
landmarks.push(new google.maps.Icon());
// etc...

Answer 3

只是直接回答你的问题（虽然请注意这不是你想要的解决方案。查看其他答案。这只是文档！），这里是一个复制粘贴来自JavaScript控制台：

> window["myNamedVar"] = "Hello, World!";
> console.log(myNamedVar);
  "Hello, World!"

Answer 4

你最好创建一个javascript对象，你可以使用它，就像在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"

Answer 5

你真的需要那些变量吗？你不能这样做：

var types = ['hospital','church','library','store'];    
for(var i =0; i < types.length; i += 1) (new google.maps.Icon()).image = "icon" + i + ".png";

根据评论完成的修改：

图标名称模式已从图标+索引+ .png更改为图标+类型+ .png 并保存循环的结果。

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]);
}

结果是： { 医院：图标，教堂：图标， ... }

其中icon是一个谷歌地图图标，其图片属性是一个字符串形式＆＃34; icon {type} .png＆＃34; ，例如，iconhostpital.png，iconchurch.png。

要使用图标写landmarks.type，其中type是类型数组中的名称，例如landmarks.hospital。

如果图像名称的形式为图标+数字+ .png，并且每种类型的数字等于其在数组中的索引，则替换createIcon（i）的调用createIcon（type [i]）。

有没有一种简单的方法来使用Javascript创建动态变量？

5 个答案: