17

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

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 中完成，但这不是一个选项。

谢谢！

4

5 回答 5

33

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

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

如果您需要将这些变量设为全局变量（您为什么要这样做？），您可以直接使用window.

于 2010-03-09T23:35:19.623 回答
5

如果您打算使用声明的对象（例如 ）来执行此操作Landmark["landmark" + i]，那么您实际上还不如使用索引数组而不是关联数组，迭代要容易得多。对象并没有真正与索引属性一起使用，因为数组做得更好：

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对象上的循环可能会因为原型属性可枚举等而变得有点混乱。

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

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

alert(landmark0);

但这会用许多不必要的变量污染全局命名空间。因此，使用数组仍然会更好：

window.landmarks = [];
landmarks.push(new google.maps.Icon());
// etc...
于 2010-03-09T23:44:38.633 回答
4

只是直接回答您的问题（尽管请注意，这不是您想要的解决方案。查看其他答案。这仅用于文档！），这是来自 JavaScript 控制台的复制粘贴：

> window["myNamedVar"] = "Hello, World!";
> console.log(myNamedVar);
  "Hello, World!"
于 2010-03-09T23:55:06.290 回答
3

您最好创建一个 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"
于 2010-03-09T23:36:04.817 回答
1

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

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

根据评论进行的修改：

图标名称模式从 icon + index + .png 更改为 icon + type + .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 是一个谷歌地图图标，它的图像属性是 "icon{type}.png" 形式的字符串，例如 iconhostpital.png、iconchurch.png。

要使用图标landmarks.type，请在类型数组中写入其中一个名称，例如landmarks.hospital。

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

于 2012-11-24T06:34:39.697 回答