1

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

将简单的标记聚类器添加到谷歌地图

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

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

1 回答 1

3

Here is the jsfiddle demo:

Let me know if you need help understanding

Global Scope Array to keep track of all your points and markers:

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

within initialize function basically loop through myPoints global array and create marker based on that. So, to add more marker, you just feed the myPoints array with lat, lng, and the 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);

Within creatMarker function we changed the following by pushing the local var marker into the global array 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
}

Now if you were to add new marker all you have to do is add lat, lng, and html as a sub array into the myPoints array:

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

so it's like [lat, lng, html]

于 2011-03-10T22:03:22.233 回答