使用Google Maps MarkerCluster for api v3时如何在maker周围创建圆圈

Question

I am using Google maps MarkerCluster for api v3 to create cluster marker. It works well. But I want to use the circle around marker and can drag the radius of circle.

var markerClusterer = null;
var map = null;
var imageUrl = 'http://chart.apis.google.com/chart?cht=mm&chs=24x32&' +
    'chco=FFFFFF,008CFF,000000&ext=.png';

function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(46.578498, 2.457275),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
    for (var i = 0; i < macDoList.length; i++) {

        var latLng = new google.maps.LatLng(macDoList[i].lat,
            macDoList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
            icon: markerImage
        });
        markers.push(marker);
    }

    markerClusterer = new MarkerClusterer(map, markers, {
        maxZoom: 16,
        gridSize: 100,
        styles: clusterStyles
    });


}

function clearClusters(e) {
    e.preventDefault();
    e.stopPropagation();
    markerClusterer.clearMarkers();
}

google.maps.event.addDomListener(window, 'load', initialize);

Anyone can help me to resolve this case?

Answer 1

I create circle successfully. I'd like to share my solution for everyone. Hope it's useful for another one.

function initialize() {
    map = new google.maps.Map(document.getElementById('map_canvas'), {
        zoom: 6,
        center: new google.maps.LatLng(46.578498, 2.457275),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var markers = [];

    var markerImage = new google.maps.MarkerImage(imageUrl, new google.maps.Size(24, 32));
    for (var i = 0; i < macDoList.length; i++) {

        var latLng = new google.maps.LatLng(macDoList[i].lat,
            macDoList[i].lng);
        var marker = new google.maps.Marker({
            position: latLng,
        icon: markerImage
    });

    google.maps.event.addListener(marker, 'click', function(a) {
        var drawCircle = new google.maps.Circle({
            center: new google.maps.LatLng(this.position.lat(), this.position.lng()),
            editable:true,
            radius: 50, // metres
            fillColor: 'yellow'
        });
        drawCircle.setMap(map);            
        //circle.bindTo('center', marker, 'position');
    });
    markers.push(marker);
}