Javascript 将数组中的值指定给键

这方面很新。。。我正试图使用数组中的数据（稍后将根据Wordpress站点上的帖子信息动态填充）在Google地图上生成标记的动态列表

下面是使用静态数据的代码的简化版本。我遇到的问题是，我似乎无法使用数组中的第五个值（即pinImageX）分配“icon”键

下面的代码很好…但很明显，所有标记都显示为单针样式

icon: pinImage1,

但是使用下面的方法是行不通的

icon: locations[i][4],

我觉得我缺少一些语法来正确地将数组中的值分配给键：(

var位置=[
['Marker1'，-50100,1'，pinImage1']，
[Marker2'，-51101,2'，pinImage2']，
[Marker3'，-52102,3'，pinImage3']，
];
var map=new google.maps.map（document.getElementById（'map'）{
缩放：8，
中心：新google.maps.LatLng（-50100），
mapTypeId:google.maps.mapTypeId.TERRAIN
});
var infowindow=new google.maps.infowindow（）；
var标记，i；
var pinColor1=“FF0000”；
var pinColor2=“00FF00”；
var pinColor3=“0000FF”；
var pinImage1=新的google.maps.MarkerImage（“http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|“+pinColor1，
新谷歌地图大小（21,34），
新google.maps.Point（0,0），
新的google.maps.Point（10,34））；
var pinImage2=新的google.maps.MarkerImage（“http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|“+pinColor2，
新谷歌地图大小（21,34），
新google.maps.Point（0,0），
新的google.maps.Point（10,34））；
var pinImage3=新的google.maps.MarkerImage（“http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|“+pinColor3，
新谷歌地图大小（21,34），
新google.maps.Point（0,0），
新的google.maps.Point（10,34））；
对于（i=0；i

图标

不使用字符串，而是直接引用

google.maps.MarkerImage

对象。您需要做的是将所有图标

MarkerImage

对象存储在关联数组或对象中（以您喜欢的为准。对象对于sweet原型函数可能很方便），然后从那里返回

以下是我如何在我的前雇主的网站上解决这个问题的：

        if (markerInfo.icon == undefined || markerInfo.icon == "") {
            for(var i=0; i<this.options.categories.length;i++) {
                if (this.options.categories[i].id == markerInfo.category) {
                    markerURLpic = this.options.categories[i].icon;
                }
            }
        }

if（markerInfo.icon==未定义| | markerInfo.icon==“”）{
对于（var i=0；i来说，变量的概念在没有作用域的情况下不能很好地工作，因此您需要做的是创建一个包含pin图像的对象，该图像将用作作用域：

var pinImages = {
    pinImage1:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor1,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage2:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor2,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34)),

    pinImage3:
        new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColor3,
        new google.maps.Size(21, 34),
        new google.maps.Point(0,0),
        new google.maps.Point(10, 34))
};

然后你可以参考如下图片：

marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: pinImages[locations[i][4]],
    map: map
});

这可能有助于您：（如果您想要一个概念验证示例，可以在www.the-vineyard.co.uk/contact.asp上完全看到源代码）谢谢Sébastien，你的概念证明看起来很棒！不幸的是，你的解决方案超出了我的javascripting能力范围。应该给你两个想法：如何做你想做的事，如何减轻你的代码。我已经包装了所有函数（分配标记图像，分配标记）整齐地放进一个对象中，以减轻代码的重复。太棒了！但有一件事，infowindow.setContent似乎不起作用（即单击时没有弹出信息气球）谢谢Sébastien！你的代码非常雄辩和精简。现在在JSFIDLE演示中，以及在我复制并粘贴到本地html文件时，都可以很好地工作。但是，当我将代码添加到Wordpress模板时，我得到的只是一个空白映射：/n确实非常令人沮丧。我现在可能不得不使用Jack的方法，该方法适用于我当前的（阿尔比特·梅西）编码并稍后重新访问您的模板，以查看我的模板中是否有任何内容与您的解决方案冲突。谢谢Jack，您的建议似乎有道理，但不幸的是，我无法使其工作。它似乎忽略指定的图标值并绘制默认标记图像，即使我已将位置数据集中的值设置为“pinImage1”（请参阅：）@NoobCoder好的，您应该执行
console.log（pinImages[locations[i][4]）
并确保值正确。不幸的是，添加console.log没有帮助。非常感谢您花时间尝试帮助。@Noob它怎么没有帮助？JavaScript控制台上显示了什么？抱歉，我的错，没有意识到您打算使用控制台…我对此有点陌生。根据您的建议，我注意到该值在pin COLOR已附加到URL。通过删除pinColor1变量并将COLOR值放在URL中，它现在可以正常工作（例如，新的google.maps.MarkerImage（“…chart.api.google.com/chart？chst=d_map_pin_letter&chld=%E2%80%A2 | FF0000”），再次感谢。
marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    icon: pinImages[locations[i][4]],
    map: map
});