Выбор нескольких маркеров в массиве для кластера маркеров в API Google Maps v3

Этот вопрос связан с этим сообщением:

Добавление простого кластеризатора маркеров на карту Google

Мне интересно, как максимально просто вызвать маркеры в массиве. Вот мой код:

var map = null;

function initialize() {
    var myOptions = {
        zoom: 8,
        center: new google.maps.LatLng(43.907787, -79.359741),
        mapTypeControl: true,
        mapTypeControlOptions: {
            style: google.maps.MapTypeControlStyle.DROPDOWN_MENU
        },
        navigationControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

    var mcOptions = {
        gridSize: 50,
        maxZoom: 15
    };
    var mc = new MarkerClusterer(map, [], mcOptions);

    google.maps.event.addListener(map, 'click', function() {
        infowindow.close();
    });

    // Add markers to the map
    // Set up three markers with info windows

    var point = new google.maps.LatLng(43.65654, -79.90138);
    var marker1 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.91892, -78.89231);
    var marker2 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.82589, -79.10040);
    var marker3 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.65654, -79.90138);
    var marker4 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.91892, -78.89231);
    var marker5 = createMarker(point, 'Abc');

    var point = new google.maps.LatLng(43.82589, -79.10040);
    var marker6 = createMarker(point, 'Abc');

    var markerArray = new Array(marker1, marker2, marker3, marker4, marker5, marker6);

    mc.addMarkers(markerArray , true);
}

var infowindow = new google.maps.InfoWindow({
    size: new google.maps.Size(150, 50)
});

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    return marker;
}

window.onload = initialize;

Проблема в этой части:

var markerArray = new Array(marker1, marker2, marker3, marker4, marker5, marker6);

Можно ли избежать именования каждого маркера и использовать что-то вроде

var markerArray = new Array(marker1-marker100);

google-maps google-maps-api-3 markerclusterer
person take2    schedule 10.03.2011    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Вот демонстрация jsfiddle:

Дайте мне знать, если вам нужна помощь в понимании

Global Scope Array для отслеживания всех ваших точек и маркеров:

var map = null;
var markerArray = []; //create a global array to store markers
var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA']];  //create global array to store points

внутри функции инициализации в основном перебирают глобальный массив myPoints и создают маркер на основе этого. Итак, чтобы добавить больше маркеров, вы просто вводите в массив myPoints lat, lng и html:

// Add markers to the map
// Set up based on the number of points in myPoints array 
for(var i=0; i<myPoints.length; i++){
     createMarker(new google.maps.LatLng(myPoints[i][0], myPoints[i][1]), myPoints[i][2]);
}

mc.addMarkers(markerArray , true);

В функции creatMarker мы изменили следующее, поместив локальный маркер var в глобальный массив markerArray:

function createMarker(latlng, html) {
    var contentString = html;
    var marker = new google.maps.Marker({
        position: latlng,
        map: map,
        zIndex: Math.round(latlng.lat() * -100000) << 5
    });

    google.maps.event.addListener(marker, 'click', function() {
        infowindow.setContent(contentString);
        infowindow.open(map, marker);
    });

    markerArray.push(marker); //push local var marker into global array
}

Теперь, если вы хотите добавить новый маркер, все, что вам нужно сделать, это добавить lat, lng и html в качестве подмассива в массив myPoints:

var myPoints = [[43.65654, -79.90138, 'ABC'],[43.91892, -78.89231, 'DEF'],[43.82589, -79.10040, 'GHA'], [10, -22, 'MY NEW MARKER']];

так что это как [lat, lng, html]

person KJYe.Name 葉家仁    schedule 10.03.2011