如何MarkerClusterer添加到我的谷歌地圖

Question

我想谷歌的羣集添加到我的地圖，但我不能工作了怎麼辦呢？我在php中使用mysql查詢創建了地圖及其信息標記。知道我正在添加更多的標記他們重疊，所以我需要添加羣集命令，但我無法得到它的工作。我的代碼是低於

<script> 
$(document).ready(function() { 


    //------- Google Maps ---------// 

    // Creating a LatLng object containing the coordinate for the center of the map 
var latlng = new google.maps.LatLng(53.0,0); 

    // Creating an object literal containing the properties we want to pass to the map 
    var options = { 
     zoom: 5, // This number can be set to define the initial zoom level of the map 
     center: latlng, 
     disableDefaultUI: true, 
     panControl: false, 
     zoomControl: true, 
     scaleControl: true, 
     mapTypeId: google.maps.MapTypeId.ROADMAP, // This value can be set to define the map type ROADMAP/SATELLITE/HYBRID/TERRAIN 
      styles: [ 
    { 
    "featureType": "landscape.natural", 
    "stylers": [ 
     { "visibility": "simplified" }, 
     { "color": "#07c6ee" } 
    ] 
    },{ 
    "featureType": "landscape.man_made", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "hue": "#6e00ff" }, 
     { "gamma": 1.96 }, 
     { "lightness": 18 }, 
     { "saturation": -78 }, 
     { "color": "#46fcb3" } 
    ] 
    },{ 
    "featureType": "water", 
    "stylers": [ 
     { "visibility": "simplified" }, 
     { "color": "#f9ec55" } 
    ] 
    },{ 
    },{ 
    "featureType": "road.highway", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#7b8080" } 
    ] 
    },{ 
    "featureType": "road.arterial", 
    "stylers": [ 
     { "visibility": "on" }, 
     { "color": "#808080" } 
    ] 
    },{ 
    "featureType": "road.local", 
    "stylers": [ 
     { "color": "#808080" }, 
     { "visibility": "on" } 
    ] 
    },{ 
    "featureType": "road", 
    "elementType": "labels.text.fill", 
    "stylers": [ 
     { "color": "#fefffe" }, 
     { "visibility": "on" } 
    ] 
    },{ 
    "featureType": "landscape.man_made", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "road.highway", 
    "elementType": "labels.icon", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    "featureType": "poi", 
    "stylers": [ 
     { "visibility": "off" } 
    ] 
    },{ 
    } 
] 
    }; 
    // Calling the constructor, thereby initializing the map 
    var map = new google.maps.Map(document.getElementById('map_div'), options); 

    // Define Marker properties 
    var image1 = new google.maps.MarkerImage('http://www.foodhawkers.co.uk/images/map-market.png', 
     // This marker is 129 pixels wide by 42 pixels tall. 
     new google.maps.Size(40, 40), 
     // The origin for this image is 0,0. 
     new google.maps.Point(0,0), 
     // The anchor for this image is the base of the flagpole at 18,42. 
     new google.maps.Point(40, 40) 
    ); 


    // 


    // Add Marker 



    var marker1 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.4636101,-0.1382557), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker1, 'click', function() { 
     infowindow1.open(map, marker1); 
    }); 

    // Add information window 
    var infowindow1 = new google.maps.InfoWindow({ 
     content: createInfo('Venn Street Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/venn-street-market" title="Click to view Venn Street Market" target="_parent">View profile</a>') 
    }); 




    var marker2 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.5367954,-0.0618898), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker2, 'click', function() { 
     infowindow2.open(map, marker2); 
    }); 

    // Add information window 
    var infowindow2 = new google.maps.InfoWindow({ 
     content: createInfo('Broadway Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/broadway-market" title="Click to view Broadway Market" target="_parent">View profile</a>') 
    }); 




    var marker3 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.4721386,-2.7580983), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker3, 'click', function() { 
     infowindow3.open(map, marker3); 
    }); 

    // Add information window 
    var infowindow3 = new google.maps.InfoWindow({ 
     content: createInfo('StrEAT Food Market', '<div style="width:200px">We\'re really hoping to be doing some amazing street food nights in the CENTRE of...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/streat-food-market" title="Click to view StrEAT Food Market" target="_parent">View profile</a>') 
    }); 




    var marker4 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.5945845,-0.1302629), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker4, 'click', function() { 
     infowindow4.open(map, marker4); 
    }); 

    // Add information window 
    var infowindow4 = new google.maps.InfoWindow({ 
     content: createInfo('Alexandra Palace Farmers Market', '<div style="width:200px">Sundays 10:00 - 15:00...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/alexandra-palace-farmers-market" title="Click to view Alexandra Palace Farmers Market" target="_parent">View profile</a>') 
    }); 




    var marker5 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.5050824,-0.0900808), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker5, 'click', function() { 
     infowindow5.open(map, marker5); 
    }); 

    // Add information window 
    var infowindow5 = new google.maps.InfoWindow({ 
     content: createInfo('Borough Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/borough-market" title="Click to view Borough Market" target="_parent">View profile</a>') 
    }); 




    var marker6 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.5057757,-0.1168251), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker6, 'click', function() { 
     infowindow6.open(map, marker6); 
    }); 

    // Add information window 
    var infowindow6 = new google.maps.InfoWindow({ 
     content: createInfo('The Real Food Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/the-real-food-market" title="Click to view The Real Food Market" target="_parent">View profile</a>') 
    }); 




    var marker7 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.5005095,-0.1131232), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker7, 'click', function() { 
     infowindow7.open(map, marker7); 
    }); 

    // Add information window 
    var infowindow7 = new google.maps.InfoWindow({ 
     content: createInfo('Lower Marsh Market', '<div style="width:200px">Lower Marsh is steeped in history as one of London’s oldest and best-loved market streets....</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/lower-marsh-market" title="Click to view Lower Marsh Market" target="_parent">View profile</a>') 
    }); 




    var marker8 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.4682204,-0.0259369), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker8, 'click', function() { 
     infowindow8.open(map, marker8); 
    }); 

    // Add information window 
    var infowindow8 = new google.maps.InfoWindow({ 
     content: createInfo('Brockley Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/brockley-market" title="Click to view Brockley Market" target="_parent">View profile</a>') 
    }); 




    var marker9 = new google.maps.Marker({ 
     position: new google.maps.LatLng(51.4528397,-0.1019773), 
     map: map,  
     icon: image1 // This path is the custom pin to be shown. Remove this line and the proceeding comma to use default pin 
    }); 

    // Add listener for a click on the pin 
    google.maps.event.addListener(marker9, 'click', function() { 
     infowindow9.open(map, marker9); 
    }); 

    // Add information window 
    var infowindow9 = new google.maps.InfoWindow({ 
     content: createInfo('Herne Hill Farmers Market', '<div style="width:200px">...</div><br /><br /><a href="http://www.foodhawkers.co.uk/market/herne-hill-farmers-market" title="Click to view Herne Hill Farmers Market" target="_parent">View profile</a>') 
    }); 




    var markerCluster = new MarkerClusterer(options, markers); 


    // Create information window 
    function createInfo(title, content) { 
     return '<div class="infowindow"><strong>'+ title +'</strong><br />'+content+'</div>'; 
    } 

}); 


</script> 

Answer 1

您正在使用哪個版本的MC？由於2.0.x版本有以下構建語法：

var markerCluster = new MarkerClusterer(map, opt_markers, opt_options); 

試試這個：

var markerCluster = new MarkerClusterer(map); 
markerCluster.addMarker(marker1); 
... 
markerCluster.addMarker(marker9); 

或者，把你的標誌物陣列，將它添加到你的代碼頂部：

var markers = []; 

聲明每個標記後，將其添加到該陣列中：

markers.push(markerN); 

並一次添加他們所有的集羣：

markerCluster.addMarkers(markers);