從數組中分配一個值到一個鍵

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