问题
I know I'm fairly close to solving this, I just need a little push in the right direction. I'm generating XML from a database that has marker locations and some other data that should be displayed in an infobox on click. I generate the XML properly and plot the markers correctly. My problem lies with the infobox. My infoboxes display the data for the last marker that was placed. I've created an array that stores one piece of data(NAME), but the infobox still only shows the info from the last marker. Once I can figure out how to display NAME properly, I can go ahead and create arrays for the rest of the data. Here's my code to further explain:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js? key=MY_KEY&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var mapstyle = [styles-removed-for-space]
var icon = 'mapicon.png';
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(10,-10),
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
styles: mapstyle,
mapTypeId: 'roadmap'
});
var name = [];
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var places = xml.documentElement.getElementsByTagName("place");
for (var x = 0; x < places.length; x++) {
var getname = places[x].getAttribute("name");
name.push(getname);
var address = places[x].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(places[x].getAttribute("lat")),
parseFloat(places[x].getAttribute("lng")));
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
title: getname
});
var boxText = document.createElement("div");
boxText.id = "infobox"
boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = name[x];
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-250, -173)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "500px"
,height: "300px"
,textAlign: "center"
}
,closeBoxMargin: "13px 5px 0px 0px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(e) {
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(map, this);
});
}
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>
I believe I'm overlooking something simple. Any help would be appreciated. Thank you very much.
回答1:
Not tested:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="styles.css" rel="stylesheet" type="text/css">
<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js? key=MY_KEY&sensor=true"></script>
<script type="text/javascript" src="infobox.js"></script>
<script type="text/javascript">
var mapstyle = [styles-removed-for-space]
var icon = 'mapicon.png';
//<![CDATA[
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(10,-10),
zoom: 3,
minZoom: 3,
disableDefaultUI: true,
styles: mapstyle,
mapTypeId: 'roadmap'
});
var name = [];
downloadUrl("genxml.php", function(data) {
var xml = data.responseXML;
var places = xml.documentElement.getElementsByTagName("place");
for (var x = 0; x < places.length; x++) {
var getname = places[x].getAttribute("name");
name.push(getname);
var address = places[x].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(places[x].getAttribute("lat")),
parseFloat(places[x].getAttribute("lng")));
createMarker(point, address, getname, name);
}
});
}
function createMarker(point, address, getname, name) {
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon,
title: getname
});
var boxText = document.createElement("div");
boxText.id = "infobox"
boxText.style.cssText = " margin-top: 8px; background: white; padding: 5px;";
boxText.innerHTML = name[x];
var myOptions = {
content: boxText
,disableAutoPan: false
,maxWidth: 0
,pixelOffset: new google.maps.Size(-250, -173)
,zIndex: null
,boxStyle: {
background: "url('http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/examples/tipbox.gif') no-repeat"
,opacity: 0.75
,width: "500px"
,height: "300px"
,textAlign: "center"
}
,closeBoxMargin: "13px 5px 0px 0px"
,closeBoxURL: "http://www.google.com/intl/en_us/mapfiles/close.gif"
,infoBoxClearance: new google.maps.Size(1, 1)
,isHidden: false
,pane: "floatPane"
,enableEventPropagation: false
};
var ib = new InfoBox(myOptions);
google.maps.event.addListener(marker, 'click', function(e) {
map.setZoom(13);
map.setCenter(this.getPosition());
ib.open(map, this);
});
}
function downloadUrl(url, callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
};
request.open('GET', url, true);
request.send(null);
}
function doNothing() {}
//]]>
</script>
</head>
<body onload="load()">
<div id="map" style="width:100%; height:100%"></div>
</body>
</html>
来源：https://stackoverflow.com/questions/15552487/multiple-map-markers-with-infoboxes-from-parsed-xml