这个问题与这篇文章有关:
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);
答案 0 :(得分:3)
以下是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全局数组并基于此创建标记。因此,要添加更多标记,只需使用lat,lng和html提供myPoints数组:
// 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]