MarkerClusterer标记

Question

我想要做的是在我的实际代码中添加一个标记聚类器，以便将地图集成到网页中。所有标记都是通过在其他地方生成的xml文件创建的。地图运转良好，没有标记器，所有的地图都装得很好。

我不知道我的代码有什么问题。也许我不知道标记器是如何正确工作的。我希望你能帮助我。

我在初始代码(工作代码)中添加了3行代码：

• var markersclust = []；
• Markersclust.push(点)；
• var markerCluster =新的MarkerClusterer(地图，标记)；

所有内容都在“脚本标记”中，但都在php文件中。

echo'
function load() {
var map = new google.maps.Map(document.getElementById("map"), {
center: new google.maps.LatLng(40.8333,14.25),
zoom: 5,
mapTypeId: \'roadmap\'
});
var infoWindow = new google.maps.InfoWindow;  

downloadUrl("xml_map_public.php", function(data) {
var xml = data.responseXML;
var markersclust = [];
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var name = markers[i].getAttribute("name");
var uid = markers[i].getAttribute("uid");
var address = markers[i].getAttribute("address");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng"));
markersclust.push(point);
var html = "<a href=\"http://www.facebook.com/"+ uid +"\" target=\"_new\"><b>" + name + "</b></a> <br/>" + address;
var marker = new google.maps.Marker({
map: map,
position: point
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
var markerCluster = new MarkerClusterer(map, markersclust);
}

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() {}

';

Answer 1

我想你可能想在你的案子里这样做：

var marker = new google.maps.Marker({
map: map,
position: point
});

markersclust.push(marker);

下面是一个我用作基础的例子。

<script type='text/javascript'>

var mapOpts = {mapTypeId: google.maps.MapTypeId.ROADMAP};
var map = new google.maps.Map(document.getElementById("map"), mapOpts);
var infoWindow = new google.maps.InfoWindow();var markerBounds = new google.maps.LatLngBounds();
var markerArray = [];

function makeMarker(options)
{var pushPin = new google.maps.Marker({map:map});
pushPin.setOptions(options);
google.maps.event.addListener(pushPin, "click", function(){infoWindow.setOptions(options);infoWindow.open(map, pushPin);});
markerBounds.extend(options.position);
markerArray.push(pushPin);
return pushPin;}

google.maps.event.addListener(map, "click", function(){infoWindow.close();});

makeMarker({title: "Berlin, Germany",position: new google.maps.LatLng(52.5234051, 13.4113999),content:""});
makeMarker({title: "220 E 42nd St, New York, NY 10017, USA",position: new google.maps.LatLng(40.7501762, -73.9731466),content:""});
makeMarker({title: "San Francisco, CA, USA",position: new google.maps.LatLng(37.7749295, -122.4194155),content:""});
makeMarker({title: "Middletown, OH, USA",position: new google.maps.LatLng(39.5150576, -84.3982763),content:""});
makeMarker({title: "Twin Lakes, Salisbury, CT 06068, USA",position: new google.maps.LatLng(42.0264482, -73.3870791),content:""});
makeMarker({title: "Dearborn, MI, USA",position: new google.maps.LatLng(42.3222599, -83.1763145),content:""});
makeMarker({title: "Essen, Germany",position: new google.maps.LatLng(51.4556432, 7.0115552),content:""});

map.fitBounds(markerBounds);
var mc = new MarkerClusterer(map, markerArray);

</script>