Javascript，從數組中讀取變量

Question

我在顯示地圖上的自定義標記時遇到了一些麻煩，爲每個位置顯示不同的標記我從包含位置的數組中獲取圖像，例如，這裏是我的代碼：

var examplearray = [ 
    [43, 52.81421, 5.935412, 'image3'] 
    ]; 

    var image1 = 'mapsicons/alpha.png'; 
    var image2 = 'mapsicons/beta.png'; 
    var image3 = 'mapsicons/charlie.png'; 


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

我不能看怎麼回事錯在這裏，但它不顯示圖像，僅僅是明確的，圖像是在正確的位置和他們做工作，如果我改變「samplemarker [3] 「例如，image1圖標確實顯示正確，同樣用於將」image3「從數組更改爲圖像位置（mapsicons/charlie.png），看起來從陣列數據到可變數據的轉換不起作用。我希望你能提前幫助我，幫助我！

Answer 1

兩個選項：

1. 以圖標的網址添加到陣列。代替：

   var examplearray = [ [43,52.81421,5.935412，'image3'] ];

使用：

var examplearray = [ 
    [43, 52.81421, 5.935412, 'mapsicons/charlie.png'] 
]; 

Proof of concept fiddle

參考陣列中的變量，而不是使用具有其名稱的字符串：

而不是：

var examplearray = [ 
    [43, 52.81421, 5.935412, 'image3'] 
]; 

使用：

var examplearray = [ 
    [43, 52.81421, 5.935412, image3] 
]; 

proof of concept fiddle

代碼段（選項1）：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var examplearray = [ 
 
    [43, 52.81421, 5.935412, 'http://maps.google.com/mapfiles/ms/micons/yellow.png'] 
 
    ]; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < examplearray.length; i++) { 
 
    var samplemarker = examplearray[i]; 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(samplemarker[1], samplemarker[2]), 
 
     map: map, 
 
     icon: samplemarker[3], 
 
     zIndex: samplemarker[0] 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

代碼段（選項2）：

function initialize() { 
 
    var map = new google.maps.Map(
 
    document.getElementById("map_canvas"), { 
 
     center: new google.maps.LatLng(37.4419, -122.1419), 
 
     zoom: 13, 
 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 
    var image1 = 'http://maps.google.com/mapfiles/ms/micons/blue.png'; 
 
    var image2 = 'http://maps.google.com/mapfiles/ms/micons/green.png'; 
 
    var image3 = 'http://maps.google.com/mapfiles/ms/micons/yellow.png'; 
 
    var examplearray = [ 
 
    [43, 52.81421, 5.935412, image3] 
 
    ]; 
 

 
    var bounds = new google.maps.LatLngBounds(); 
 
    for (var i = 0; i < examplearray.length; i++) { 
 
    var samplemarker = examplearray[i]; 
 
    var marker = new google.maps.Marker({ 
 
     position: new google.maps.LatLng(samplemarker[1], samplemarker[2]), 
 
     map: map, 
 
     icon: samplemarker[3], 
 
     zIndex: samplemarker[0] 
 
    }); 
 
    bounds.extend(marker.getPosition()); 
 
    } 
 
    map.fitBounds(bounds); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);

html, 
 
body, 
 
#map_canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map_canvas"></div>

Answer 2

花了我一些時間來理解這個想法。如果將icon: samplemarker[3]替換爲icon: this[samplemarker[3]]，會發生什麼情況？其他