谷歌地圖API信息框和for循環

Question

希望在這裏得到一些幫助。我有一個數據庫上的位置，我已成功地將其放入一個數組中，該數組可成功繪製地圖上的標記。唯一的缺點是我想自定義市場infowindow的外觀，所以即時通訊使用信息框。

但是，當我從我的數組中回顯變量時，它會將最後一個結果回顯到每個信息框中，並且我完全陷入了這個問題。

有人可以看看我的代碼，看看哪裏出了問題或指出我在正確的方向嗎？

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script> 
<script type="text/javascript" language="javascript"> 
// -- Location API -- // 
infos = []; 

function initialize() { 
    var myOptions = { 
    zoom: 3, 
    center: new google.maps.LatLng(54.57206165565852, 12.48046875), 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
/* now inside your initialise function */ 
infowindow = new google.maps.InfoWindow({ 
content: "holding..." 
}); 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 

    setMarkers(map, beaches); 

} 

/** 
* Data for the markers consisting of a name, a LatLng and a zIndex for 
* the order in which these markers should display on top of each 
* other. 
*/ 
var beaches = [ 
[1, 'Peterhead', 57.487044, -1.800417, 1, 'Building 1', 'Glenbank'], 
[2, 'Cowdenbeath', 56.09946, -3.35909, 1, 'Building 22', 'The Paragon Works Station'], 
[3, 'Norfolk', 52.595971, 1.728609, 1, 'Building 3', '39 Southgates Road'] 
]; 

function setMarkers(map, locations) { 
    // Add markers to the map 

    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('http://stlab.co.uk/group/assets/img/icons/map-pin.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(15, 22), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(5, 22)); 

    for (var i = 0; i < locations.length; i++) { 
    var beach = locations[i]; 
    var html = '<div class="phoney">'+beach[4]+'<br>'+beach[5]+'</div>' 
    var myLatLng = new google.maps.LatLng(beach[2], beach[3]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     content:html, 
     title: beach[1], 
     zIndex: beach[4] 
    }); 


    var boxText = document.createElement("div"); 
     boxText.style.cssText = "border: 1px solid black; margin-top: 8px;    background: yellow; padding: 5px;"; 
     boxText.innerHTML = beach[0]+"<br>"+beach[6]; 

    var myOptions = { 
     content: boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(-140, 0), 
      zIndex: null, 
      boxStyle: { 
       background: "url('tipbox.gif') no-repeat", 
       opacity: 0.75, 
       width: "280px" 
      }, 
      closeBoxMargin: "10px 2px 2px 2px", 
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
      infoBoxClearance: new google.maps.Size(1, 1), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
     }; 

     google.maps.event.addListener(marker, "click", function (e) { 
      ib.open(map, this); 
     }); 

    var ib = new InfoBox(myOptions); 
    } 
} 
</script> 

Answer 1

這裏是工作的例子。

<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/infobox/1.1.9/src/infobox.js"></script> 
<script type="text/javascript"> 
// -- Location API -- // 
var infos = []; 
var ib = new InfoBox(); 
function initialize() { 
    var myOptions = { 
    zoom: 3, 
    center: new google.maps.LatLng(54.57206165565852, 12.48046875), 
    mapTypeControl: false, 
    mapTypeId: google.maps.MapTypeId.TERRAIN 
    } 
/* now inside your initialise function */ 
var infowindow = new google.maps.InfoWindow({ 
content: "holding..." 
}); 

    var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    var beaches = [ 
[1, 'Peterhead', 57.487044, -1.800417, 1, 'Building 1', 'Glenbank'], 
[2, 'Cowdenbeath', 56.09946, -3.35909, 1, 'Building 22', 'The Paragon Works Station'], 
[3, 'Norfolk', 52.595971, 1.728609, 1, 'Building 3', '39 Southgates Road'] 
]; 
    for (var i = 0; i < beaches.length; i++) { 
    setMarkers(map, beaches[i]); 
    } 
} 

/** 
* Data for the markers consisting of a name, a LatLng and a zIndex for 
* the order in which these markers should display on top of each 
* other. 
*/ 

function setMarkers(map, beach) { 
    // Add markers to the map 
    // Marker sizes are expressed as a Size of X,Y 
    // where the origin of the image (0,0) is located 
    // in the top left of the image. 

    // Origins, anchor positions and coordinates of the marker 
    // increase in the X direction to the right and in 
    // the Y direction down. 
    var image = new google.maps.MarkerImage('http://stlab.co.uk/group/assets/img/icons/map-pin.png', 
     // This marker is 20 pixels wide by 32 pixels tall. 
     new google.maps.Size(15, 22), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 0,32. 
     new google.maps.Point(5, 22)); 

    //var beach = locations[i]; 
    var html = '<div class="phoney">'+beach[4]+'<br>'+beach[5]+'</div>' 
    var myLatLng = new google.maps.LatLng(beach[2], beach[3]); 
    var marker = new google.maps.Marker({ 
     position: myLatLng, 
     map: map, 
     icon: image, 
     content:html, 
     title: beach[1], 
     zIndex: beach[4] 
    }); 


     var boxText = document.createElement("div"); 
     boxText.style.cssText = "border: 1px solid black; margin-top: 8px;background: yellow; padding: 5px;"; 
     boxText.innerHTML = beach[0]+"<br>"+beach[6]; 
var myOptions = { 
      content:boxText, 
      disableAutoPan: false, 
      maxWidth: 0, 
      pixelOffset: new google.maps.Size(-140, 0), 
      zIndex: null, 
      boxStyle: { 
       background: "url('tipbox.gif') no-repeat", 
       opacity: 0.75, 
       width: "280px" 
      }, 
      closeBoxMargin: "10px 2px 2px 2px", 
      closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif", 
      infoBoxClearance: new google.maps.Size(1, 1), 
      isHidden: false, 
      pane: "floatPane", 
      enableEventPropagation: false 
     }; 
     google.maps.event.addListener(marker, "click", function (e) { 
        ib.setOptions(myOptions); 
        ib.open(map, marker); 
     }); 
    } 
</script>