在我的代码中，标记群集在群集中显示错误的标记数量，准确显示群集中实际标记数量的两倍。我使用自定义图标，我想图标的google.maps.MarkerOptions对象规范使这个重复计算
var marker = new google.maps.Marker({
position: point,
icon: icon.icon,
});
整个代码如下所示。
<!DOCTYPE html >
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<link href="Free-Camping/free_camping_style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Free Camping</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclustererplus/src/markerclusterer.js"></script>
<script type="text/javascript">
<!--
//<![CDATA[
//markers cluster
var markerscluster = [];
//markers cluster
//*** Dragable Marker 1/3 - Start *** //
var geocoder = new google.maps.Geocoder();
function geocodePosition(pos) {
geocoder.geocode({
latLng: pos
}, function(responses) {
if (responses && responses.length > 0) {
updateMarkerAddress(responses[0].formatted_address);
} else {
updateMarkerAddress('Cannot determine address at this location.');
}
});
}
function updateMarkerStatus(str) {
document.getElementById('markerStatus').innerHTML = str;
}
function updateMarkerPosition(latLng) {
document.getElementById('info').value = [
latLng.lat(),
//latLng.lng()
].join(', ');
document.getElementById('info2').value = [
//latLng.lat(),
latLng.lng()
].join(', ');
}
function updateMarkerAddress(str) {
document.getElementById('address').innerHTML = str;
}
//*** Dragable Marker 1/3 - End *** //
function load() {
var latLng = new google.maps.LatLng(-25.878994,134.018553);
geocoder = new google.maps.Geocoder();
var map = new google.maps.Map(document.getElementById("map"), {
center: latLng,
zoom: 4,
mapTypeId: 'roadmap'
});
var infoWindow = new google.maps.InfoWindow;
// Change this depending on the name of your PHP file
downloadUrl("free_camping_phpsql.php", function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var category = markers[i].getAttribute("category");
var name = markers[i].getAttribute("name");
var street = markers[i].getAttribute("street");
var locality = markers[i].getAttribute("locality");
var description = markers[i].getAttribute("description");
var image = markers[i].getAttribute("image");
var toilet = markers[i].getAttribute("toilet");
var bbq = markers[i].getAttribute("bbq");
var able = markers[i].getAttribute("able");
var tentok = markers[i].getAttribute("tentok");
var caravanok = markers[i].getAttribute("caravanok");
var dumppoint = markers[i].getAttribute("dumppoint");
var shade = markers[i].getAttribute("shade");
var water = markers[i].getAttribute("water");
var swimming = markers[i].getAttribute("swimming");
var fishing = markers[i].getAttribute("fishing");
var hiking = markers[i].getAttribute("hiking");
var mobileok = markers[i].getAttribute("mobileok");
var name2 = markers[i].getAttribute("name2");
var email = markers[i].getAttribute("email");
var lat = markers[i].getAttribute("lat");
var lng = markers[i].getAttribute("lng");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 18px; font-weight: bold; text-align: left">' + name + '</p>'
+ '<p style="font-family: calibri, corbel, verdana; color: #621c11; font-size: 14px; text-align: left">' + street + '</br>'
+ locality + '</br>'
+ lat + ', ' + lng + '</p>'
+ '<img src="Free-Camping/images/'+image+'" width=150; height=150;>' + '</br>'
+ '<a href="Free-Camping/images/'+image+'" target="_blank">(enlarge image)' + '</a>'
+ '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 13px; text-align: left">' + description + '</p>'
// Checkbox
+ '<p style="font-family: calibri, corbel, verdana; color: #0f0f0f; font-size: 12px; text-align: left;"> Toilet: ' + toilet + '<br>'
+ 'BBQ: ' + bbq + '<br>'
+ 'Table: ' + able + '<br>'
+ 'Tent: ' + tentok + '<br>'
+ 'Caravan: ' + caravanok + '<br>'
+ 'Dumppoint: ' + dumppoint + '<br>'
+ 'Shade: ' + shade + '<br>'
+ 'Water: ' + water + '<br>'
+ 'Swimming: ' + swimming + '<br>'
+ 'Fishing: ' + fishing + '<br>'
+ 'Hiking: ' + hiking + '<br>'
+ 'Mobile: ' + mobileok + '</p>';
var customIcons = {
"1": {
icon: 'Free-Camping/markers/BeachCampingSite.png',
},
"2": {
icon: 'Free-Camping/markers/BushCampingSite.png',
},
"3": {
icon: 'Free-Camping/markers/ParkForestReserve.png',
},
"4": {
icon: 'Free-Camping/markers/PrivateCampingSite.png',
},
"5": {
icon: 'Free-Camping/markers/RoadsideRestArea.png',
},
"6": {
icon: 'Free-Camping/markers/NewLocationMarker.png',
}
};
var icon = customIcons[category] || {};
var marker = new google.maps.Marker({
//map: map,
position: point,
icon: icon.icon,
});
//markers cluster
markerscluster.push(marker);
//markers cluster
bindInfoWindow(marker, map, infoWindow, html);
}
//markers cluster
var markerCluster = new MarkerClusterer(map, markerscluster, {
gridSize: 60,
minimumClusterSize: 1,
maxZoom: 5
});
//markers cluster
//*** Dragable Marker 2/3 - Start *** //
var marker2 = new google.maps.Marker({
position: latLng,
title: 'Point A',
map: map,
draggable: true
});
// Update current position info.
updateMarkerPosition(latLng);
geocodePosition(latLng);
// Add dragging event listeners.
google.maps.event.addListener(marker2, 'dragstart', function() {
updateMarkerAddress('Dragging...');
});
google.maps.event.addListener(marker2, 'drag', function() {
updateMarkerStatus('Dragging...');
updateMarkerPosition(marker2.getPosition());
});
google.maps.event.addListener(marker2, 'dragend', function() {
updateMarkerStatus('Drag ended');
geocodePosition(marker2.getPosition());
});
//*** Dragable Marker 2/3 - End *** //
});
}
//*** Dragable Marker 3/3 - Start *** //
// Onload handler to fire off the app.
google.maps.event.addDomListener(window, 'load', load);
//*** Dragable Marker 3/3 - End *** //
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}
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() {}
//]]>
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function(){
$('#submit').hover(
function(){ // Change the input image's source when we "roll on"
$(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_2.png'});
},
function(){ // Change the input image's source back to the default on "roll off"
$(this).attr({ src : 'Free-Camping/images2/SubmitCampsiteButton_1.png'}); }
);
});
</script>
</head>
<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">
<div id="main_layer" style="position:absolute; left:50%; top:25px; width:788px; height:1800px; margin-left: -390px;">
<div id="map_layer" style="position:absolute; left:0px; top:0px; width:780px; height:595px;" class="map_frame">
<div id="map_centre_icon" style="position:absolute; top:11px; width:25px; height:25px; margin-left: 715px; "><a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image7','','Free-Camping/images2/MapCentreIcon_2.png',1)"><img src="Free-Camping/images2/MapCentreIcon_1.png" name="Image7" width="24" height="24" border="0" onclick="load();" ></a></div>
<div id="map" style="position:absolute; top:45px; width:760px; height:500px; margin-left: 10px; "></div>
<div id="legend" style="position:absolute; top:550px; width:760px; height:45px; margin-left: 10px;">
<div id="image Beach Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 10px;"><img src="Free-Camping/markers/BeachCampingSite.png" width="32" height="37">
</div>
<div id="text Beach Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 42px;"><span class="legend_text">Beach Camping Site</span>
</div>
<div id="image Bush Camping Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 160px;"><img src="Free-Camping/markers/BushCampingSite.png" width="32" height="37">
</div>
<div id="text Bush Camping Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 192px;"><span class="legend_text">Bush Camping Site</span>
</div>
<div id="image Park Forest Reserve" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 310px;"><img src="Free-Camping/markers/ParkForestReserve.png" width="32" height="37">
</div>
<div id="text Park Forest Reserve" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 342px;"><span class="legend_text">Park Forest Reserve</span>
</div>
<div id="image Private CampingS Site" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 460px;"><img src="Free-Camping/markers/PrivateCampingSite.png" width="32" height="37">
</div>
<div id="text Private CampingS Site" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 492px;"><span class="legend_text">PrivateCampingSite</span>
</div>
<div id="image Roadside Rest Area" style="position:absolute; top:0px; width:32px; height:37px; margin-left: 610px;"><img src="Free-Camping/markers/RoadsideRestArea.png" width="32" height="37">
</div>
<div id="text Roadside Rest Area" style="position:absolute; top:7px; width:100px; height:15px; margin-left: 642px;"><span class="legend_text">Roadside Rest Area</span>
</div>
</div>
<div id="form" style="position:absolute; left:0px; margin-left: 0px; top:603px; width:788px; height:1180px; background-color: #f4f4f4; layer-background-color: #f4f4f4; border: 1px none #000000;" class="form">
<form action="free_camping_insert.php" method="post" enctype="multipart/form-data">
<div id="form" style="position:absolute; left:14; top:0px; width:760px; height:335px;" class="form2">
<p align="center" class="headers">Add a New Free Camping Site</p>
<p align="center"><span class="text">Your Name:</span> <input type="text" name="name2" />
<br>
<br>
<span class="text">Your Email:</span>
<input type="text" name="email" />
<br>
<br>
<span class="text">Campsite name*:</span>
<input type="text" name="name" />
<br>
<br>
<span class="text">Campsite Street:</span>
<input name="street" type="text" size="26" />
<br>
<br>
<span class="text">Campsite Locality:</span>
<input name="locality" type="text" size="25" />
<br>
<br>
<span class="text">Type of Campsite*:</span>
<select name="category">
<option value="1">Beach Camping Site</option>
<option value="2">Bush Camping Site</option>
<option value="3">Park Forest Reserve</option>
<option value="4">Private Camping Site</option>
<option value="5">Roadside Rest Area</option>
</select>
<p align="center" class="text">
<label>Upload Picture</label>
<input type="file" name="image" /><br>
</div>
<div id="form" style="position:absolute; left:14; top:335px; width:760px; height:150px;" class="form2">
<p align="center" class="headers">Select Campsite Amenities</p>
<p align="center"><img src="Free-Camping/images2/AmenitiesIcons.png" width="682" height="44"> </p>
<div id="checkbox1" style="position:absolute; left:50px; top:102px; width:25px; height:25px;">
<input type="hidden" name="toilet" value="No">
<input type="checkbox" name="toilet" value="Yes">
</div>
<div id="checkbox2" style="position:absolute; left:108px; top:102px; width:25px; height:25px;">
<input type="hidden" name="bbq" value="No">
<input type="checkbox" name="bbq" value="Yes">
</div>
<div id="checkbox3" style="position:absolute; left:165px; top:102px; width:25px; height:25px;">
<input type="hidden" name="able" value="No">
<input type="checkbox" name="able" value="Yes">
</div>
<div id="checkbox4" style="position:absolute; left:223px; top:102px; width:25px; height:25px;">
<input type="hidden" name="tentok" value="No">
<input type="checkbox" name="tentok" value="Yes">
</div>
<div id="checkbox5" style="position:absolute; left:281px; top:102px; width:25px; height:25px;">
<input type="hidden" name="caravanok" value="No">
<input type="checkbox" name="caravanok" value="Yes">
</div>
<div id="checkbox6" style="position:absolute; left:338px; top:102px; width:25px; height:25px;">
<input type="hidden" name="dumppoint" value="No">
<input type="checkbox" name="dumppoint" value="Yes">
</div>
<div id="checkbox7" style="position:absolute; left:398px; top:102px; width:25px; height:25px;">
<input type="hidden" name="shade" value="No">
<input type="checkbox" name="shade" value="Yes">
</div>
<div id="checkbox8" style="position:absolute; left:454px; top:102px; width:25px; height:25px;">
<input type="hidden" name="water" value="No">
<input type="checkbox" name="water" value="Yes">
</div>
<div id="checkbox9" style="position:absolute; left:512px; top:102px; width:25px; height:25px;">
<input type="hidden" name="swimming" value="No">
<input type="checkbox" name="swimming" value="Yes">
</div>
<div id="checkbox10" style="position:absolute; left:570px; top:102px; width:25px; height:25px;">
<input type="hidden" name="fishing" value="No">
<input type="checkbox" name="fishing" value="Yes">
</div>
<div id="checkbox11" style="position:absolute; left:629px; top:102px; width:25px; height:25px;">
<input type="hidden" name="hiking" value="No">
<input type="checkbox" name="hiking" value="Yes">
</div>
<div id="checkbox12" style="position:absolute; left:687px; top:102px; width:25px; height:25px;">
<input type="hidden" name="mobileok" value="No">
<input type="checkbox" name="mobileok" value="Yes">
</div>
<p align="center"><br>
</div>
<div id="form" style="position:absolute; left:14; top:485px; width:760px; height:625px;" class="form2">
<div align="center"><span class="headers">Description of the Campsite </span><span class="text">(tell as a bit about the site)</span> </p>
</div>
<p align="center"> <textarea name="description" cols="85" rows="7" class="borders_around_form_boxes"></textarea>
<br>
</p>
<p align="center" class="headers">Location of the Free Campsite</p>
<p align="center" class="text">Enter the GPS coordinates in the boxes to create a new marker.</p>
<div align="center"><br align="center" class="text">
<span class="text">You can be oriented by red marker that are displayed in the map centar, which you can drag and drop on the map.</span> </br>
</div>
<div class="text" id="infoPanel">
<div align="center"><b>Marker status:</b>
</div>
<div align="center" id="markerStatus">
<div align="center"><i>Click and drag the marker.</i></div>
</div>
<div align="center"><b>Closest matching address:</b>
</div>
<div align="center" id="address"></div>
</div>
<p align="center"><span class="text">Latitude*:</span>
<input size="20" type="text" align="center" id="info" name="lat" /><br>
<br>
<span class="text">Longitude*:</span>
<input size="20" type="text" align="center" id="info2" name="lng"/><br>
<br>
<input type="hidden" name="MAX_FILE_SIZE" value="100000" />
<input type="image" name="submit" id="submit" src="Free-Camping/images2/SubmitCampsiteButton_1.png"/>
</p>
<p align="left"><span class="text"><em> * - Mandatory Fields </em></span> </p>
</div>
</div>
</div>
</body>
</html>
我很感激帮助。
最佳， 达科
答案 0 :(得分：2)
您的“加载”功能被调用两次。
来到这里：
google.maps.event.addDomListener(window, 'load', load);
并且在身体上载一次
<body onload="load();MM_preloadImages('Free-Camping/images2/MapCentreIcon_2.png','Free-Camping/images2/SubmitCampsiteButton_2.png')">
（通常第一个只会写第二个，但看起来你的HTML无效）