从数组中分配一个值到一个键

Question

在这个方面很新颖...我试图在一个Google Map上使用来自数组的数据生成一个动态的标记列表（这将稍后从post信息动态地填充一个WordPress的网站）。

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

的follwing优良工程......但明显显示与一个针款式

icon: pinImage1, 

但所有标记使用follwoing不起作用

icon: locations[i][4], 

我觉得我失去了一些语法来正确分配密钥的值从阵列:(

var locations = [ 
['Marker1', -50, 100, 1, 'pinImage1'], 
['Marker2', -51, 101, 2, 'pinImage2'], 
['Marker3', -52, 102, 3, 'pinImage3'], 
]; 

    var map = new google.maps.Map(document.getElementById('map'), { 
     zoom: 8, 
     center: new google.maps.LatLng(-50, 100), 
     mapTypeId: google.maps.MapTypeId.TERRAIN 
    }); 

    var infowindow = new google.maps.InfoWindow(); 

    var marker, i; 
     var pinColor1 = "FF0000"; 
     var pinColor2 = "00FF00"; 
     var pinColor3 = "0000FF"; 

      var 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)); 

      var 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)); 

      var 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)); 

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

     google.maps.event.addListener(marker, 'click', (function(marker, i) { 
     return function() { 
      infowindow.setContent(locations[i][0]); 
      infowindow.open(map, marker); 
     } 
     })(marker, i)); 
    } 

Answer 1

icon doe s不接受一个字符串，而是直接引用一个google.maps.MarkerImage对象。你需要做的是将所有的图标MarkerImage对象存储在一个关联数组或对象中（无论哪个都适合你的想象，对象可能对于甜美的原型函数来说很方便），然后从那里返回。

下面是我解决这个怎么得到的网站上为我的前雇主：

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

这是标记生成功能的一部分。本质上，它允许用户随意提交一个字符串，并让其他人进行查找。所有MarkerImage对象都存储在this.options.categories中。

希望这会有所帮助。

Answer 2

可变变量的概念不无范围工作得很好，所以你需要做的是创建一个包含你的脚的图像，将作为的范围对象：

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