在 Google Maps v3 API 中为标记簇选择数组中的多个标记

Question

这个问题与这篇文章有关：

Adding simple marker clusterer to google map

我想知道如何尽可能简单地调用数组中的标记。这是我的代码：

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);

Answer 1

这里是jsfiddle demo：

如果您需要帮助理解，请告诉我

全局范围数组来跟踪您的所有点和标记：

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]