好吧，如果您必须使用 xml，好消息是它并没有那么困难。访问 xml 元素的工作方式与访问普通 DOM 非常相似，但有许多不同之处。
需要注意的一点是来自 xml 的所有数据都是字符串，因此在需要 Number 的地方必须转换为 Number 类型。例如在创建 google.maps.LatLng 时处理 lat & lon 值等。至于加载要读取的 xml，我们将使用 ajax 来加载它。
我整理了一个示例，其中包含一些额外的实用程序（注意用于选择不同状态的选择，以及可单击以显示信息窗口的标记）供您仔细阅读。我加入 jQuery 库只是为了简化 ajax 请求代码，尽管 jQuery 也可以用于代码中我没有花时间转换的其他内容。
我很好奇，xml中的'count_unverified'是什么？
好吧，享受吧！
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>Google Maps MarkerClusterer</title>
<style type="text/css">
.map-infowindow {
border:3px ridge blue;
padding:6px;
}
</style>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
function initialize(elementId, stateAbbr) {
var callback = function (data, status, xhr) {
//data will be the xml returned from the server
if (status == 'success') {
createMap(elementId, data);
}
};
//using jQuery to fire off an ajax request to load the xml,
//using our callback as the success function
$.ajax(
{
url : 'http://historyads.com/xml_state.php',
data : 'state='+ stateAbbr,
dataType : 'xml',
success : callback
}
);
}
function createMap(elementId, xml) {
var i, xmlMarker, lat, lng, latLng,
map = new google.maps.Map(
document.getElementById(elementId),
{
mapTypeId: google.maps.MapTypeId.ROADMAP
}
),
infoWindow = new google.maps.InfoWindow({maxWidth:200}),
xmlMarkers = xml.getElementsByTagName('marker'),
markers = [],
latlngs = [],
bounds = new google.maps.LatLngBounds();
//private function, for scope retention purposes
function createMarker(latlng, name, count_unverified) {
latlngs.push(latlng);
var marker = new google.maps.Marker({
position: latlng,
map: map
});
google.maps.event.addListener(
marker,
"click",
function () {
var info = '<div class="map-infowindow"><h4 class="map-info-title">';
info += name +'</h4><p class="map-info-content">count_unverified: ';
info += count_unverified +'</p>';
infoWindow.setContent(info);
infoWindow.open(map, marker);
}
);
markers.push(marker);
}
for (i = 0; i < xmlMarkers.length; i++) {
xmlMarker = xmlMarkers[i];
//lat & lng in the xml file are strings, convert to Number
lat = Number(xmlMarker.getAttribute('lat'));
lng = Number(xmlMarker.getAttribute('lng'));
latLng = new google.maps.LatLng(lat, lng);
createMarker(
latLng,
xmlMarker.getAttribute('name'),
xmlMarker.getAttribute('count_unverified')
);
}
markerCluster = new MarkerClusterer(map, markers);
for (i = 0; i < latlngs.length; i++) {
bounds.extend(latlngs[i]);
}
map.fitBounds(bounds);
return map;
}
function buildStatesSelect() {
var i,
select = document.getElementById('stateSelect'),
states = [
'AL', 'AK', 'AZ', 'AR', 'CA', 'CO', 'CT', 'DE', 'DC', 'FL',
'GA', 'HI', 'ID', 'IL', 'IN', 'IA', 'KS', 'KY', 'LA', 'ME',
'MD', 'MA', 'MI', 'MN', 'MS', 'MO', 'MT', 'NE', 'NV', 'NH',
'NJ', 'NM', 'NY', 'NC', 'ND', 'OH', 'OK', 'OR', 'PA', 'RI',
'SC', 'SD', 'TN', 'TX', 'UT', 'VT', 'VA', 'WA', 'WV', 'WI', 'WY'
],
len = states.length;
for (i = 0; i < len; i++) {
addOption(select, new Option(states[i], states[i]));
}
select.onchange = function () {
var opt = this.options[this.options.selectedIndex];
if (opt.value != '') {
initialize('map', opt.value);
}
};
}
function addOption(select, option) {
try {
select.add(option,null); //standard method
} catch(er) {
select.add(option); //IE only
}
}
google.maps.event.addDomListener(
window,
'load',
function () {
initialize('map', 'FL');
buildStatesSelect();
}
);
</script>
</head>
<body>
<div id="map" style="width:500px; height:500px;"></div>
<select id="stateSelect">
<option value="">Select State</option>
</select>
</body>
</html>