Google Map API 信息框和 for 循环

Question

希望在这里得到一些帮助。我已经成功地将数据库中的位置放入一个数组中，该数组成功地在地图上绘制标记。唯一的缺点是我想自定义市场信息窗口的外观，所以我使用信息框。

但是当我从数组中回显变量时，它会将最后一个结果回显到每个信息框中，我完全被这个结果难住了。

有人可以看看我的代码，看看哪里出了问题或指出我正确的方向吗？

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