Question

我无法将MarkerClusterer放入我当前的Google地图中（这需要很长时间才能实现这一目标！）。我该如何将两者结合起来？我正在使用api的V3。

这是MarkerClusterer代码：

var center = new google.maps.LatLng(37.4419, -122.1419);
var options = {
  'zoom': 13,
  'center': center,
  'mapTypeId': google.maps.MapTypeId.ROADMAP
};

var map = new google.maps.Map(document.getElementById("map"), options);

var markers = [];
for (var i = 0; i < 100; i++) {
  var latLng = new google.maps.LatLng(data.photos[i].latitude,
      data.photos[i].longitude);
  var marker = new google.maps.Marker({'position': latLng});
  markers.push(marker);
}
var markerCluster = new MarkerClusterer(map, markers);

更新：我试图将群集器添加到我当前的代码中，但它似乎不起作用。 Places[i]似乎没有加入群集器。

Answer 1

您只需将每个标记添加到数组中，然后在全部添加之后，创建MarkerClusterer对象

var markers = [];

// Adding a LatLng object for each city  
for (var i = 0; i < marker_data1.length; i++) { 
    (function(i) { 
        geocoder.geocode( {'address': marker_data1[i]}, function(results, status) {
            if (status == google.maps.GeocoderStatus.OK) {
                places[i] = results[0].geometry.location;

                // Adding the markers 
                var marker = new google.maps.Marker({
                    position: places[i],
                    map: map,
                    title: 'Place number ' + i,
                });

                markers.push(marker);

                // Creating the event listener. It now has access to the values of 
                // i and marker as they were during its creation
                google.maps.event.addListener(marker, 'click', function() {
                    // Check to see if we already have an InfoWindow
                    if (!infowindow) {
                        infowindow = new google.maps.InfoWindow();
                    }

                    // Setting the content of the InfoWindow
                    infowindow.setContent(marker_data[i]);

                    // Tying the InfoWindow to the marker 
                    infowindow.open(map, marker);
                });

                // Extending the bounds object with each LatLng 
                bounds.extend(places[i]); 

                // Adjusting the map to new bounding box 
                map.fitBounds(bounds) 
            } else { 
            alert("Geocode was not successful for the following reason: " + status); 
            } 
        });
    })(i);
} 

var markerCluster = new MarkerClusterer(map, markers);

Answer 2

问题在于地理编码。解决了大量的游戏：

for (var i = 0; i < address.length; i++) {
    (function(i) {
    geocoder.geocode( {'address': address[i]}, function(results, status) {
    if (status == google.maps.GeocoderStatus.OK) {
    places[i] = results[0].geometry.location;
    // Adding the markers
    var marker = new google.maps.Marker({position: places[i]});
    markers.push(marker);
    //add the marker to the markerClusterer
    markerCluster.addMarker(marker);

Answer 3

好的，这是一个有效的解决方案。我基本上剥离了东西，直到它开始工作。我认为问题可能在于地理编码器。当你创建标记时，你在var marker = new google.maps.Marker({position: places[i], map: map,});的末尾有一个尾随逗号，这会在IE中引起问题。您会注意到我使用坐标而不是地理编码器（我没有经验），但它可能是地理编码器和markerclusterer之间的冲突？

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> &laquo; Mediwales Mapping</title>
<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/markerclusterer.js"></script>
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0; padding: 0 }
  #map_canvas { height: 100% }
  p { font-family: Helvetica;}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>


<script>
function initialize() {

    // Creating an object literal containing the properties we want to pass to the map 
    var options = { 
        zoom: 10, 
        center: new google.maps.LatLng(52.40, -3.61), 
        mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 

    // Creating the map 
    var map = new google.maps.Map(document.getElementById('map_canvas'), options); 

    // Creating a LatLngBounds object 
    var bounds = new google.maps.LatLngBounds(); 

    // Creating an array that will contain the addresses 
    var places = []; 

    // Creating a variable that will hold the InfoWindow object 
    var infowindow; 

    var popup_content = ["<p>DTR Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/dtr-logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/dtr-medical\/\">View profile<\/a>","<p>MediWales<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/index.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/mediwales\/\">View profile<\/a>","<p>Teamworks Design & Marketing<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Teamworks-Design-Logo.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/teamworks-design-and-marketing\/\">View profile<\/a>","<p>Acuitas Medical<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/acuitas-medical-logo.gif\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/acuitas-medical\/\">View profile<\/a>","<p>Nightingale<\/p><img src=\"http:\/\/www.mediwales.com\/mapping\/wp-content\/uploads\/2011\/09\/Nightingale.png\" \/><br \/><br \/><a href=\"http:\/\/www.mediwales.com\/mapping\/home\/nightingale\/\">View profile<\/a>"];
    var address = ["17 Clarion Court, Llansamlet, Swansea, SA6 8RF","7 Schooner Way, , Cardiff, CF10 4DZ","65 St Brides Rd, Aberkenfig, Bridgend, CF32 9RA","Kings Road, , Swansea, SA1 8PH","Unit 20 Abenbury Way, Wrexham Industrial Estate, Wrexham, LL13 9UG"];
    var geocoder = new google.maps.Geocoder(); 

    var markers = [];
    var places = [
        new google.maps.LatLng(53.077528,-2.978211),
        new google.maps.LatLng(52.83264,-3.906555),
        new google.maps.LatLng(51.508742,-3.259048),
        new google.maps.LatLng(51.467697,-3.208923),
        new google.maps.LatLng(51.628248,-3.923035)
    ];

    // Adding a LatLng object for each city  
    for (var i = 0; i < address.length; i++) { 
        //places[i] = results[0].geometry.location;

        // Adding the markers 
        var marker = new google.maps.Marker({position: places[i], map: map, draggable:true});

        markers.push(marker);

        // Creating the event listener. It now has access to the values of i and marker as they were during its creation
        google.maps.event.addListener(marker, 'click', function() {
            // Check to see if we already have an InfoWindow
            if (!infowindow) {
                infowindow = new google.maps.InfoWindow();
            }

            // Setting the content of the InfoWindow
            infowindow.setContent(popup_content[i]);

            // Tying the InfoWindow to the marker 
            infowindow.open(map, marker);
        });

        // Extending the bounds object with each LatLng 
        bounds.extend(places[i]); 

        // Adjusting the map to new bounding box 
        map.fitBounds(bounds) ;
    } 

    var markerCluster = new MarkerClusterer(map, markers, {
            zoomOnClick: true,
            averageCenter: true
        });
}

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body class="home page page-id-1873 page-parent page-template page-template-page-php">

<div id="map_canvas"></div>

</body></html>

如何将MakerClusterer与当前的Google Map集成？ V3

3 个答案: