但是当我从我的数组中回显变量时，它回显了每个信息框的最后结果，而且我完全不知道这个。
有人可以查看我的代码并查看iv出错的地方或指向正确的方向吗？
<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>
答案 0 :(得分：5)
这是工作示例。
<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>