我创建了一个自定义地图，显示基于数组中保存的位置数据的标记。现在我正在尝试应用标记管理器，因为一些标记靠得很近，可能会导致混淆或可用性问题。
我真的很感激一些帮助，我不确定为什么标记没有显示在地图上，我可能将标记管理器代码放在错误的位置。
完整代码如下：
(function() {
var map, infowindow, marker;
//Create an array literal to store the weather icons
window.onload = function() {
//Creating a map
var options = {
zoom: 2,
center: new google.maps.LatLng(25,25),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map'),options);
var mgr = new MarkerManager(map);
var markers = [];
var locationIcons = [];
//Add the factory icon
locationIcons['factory'] = new google.maps.MarkerImage(
'images/factory.png',
new google.maps.Size(32.0, 37.0),
null,
new google.maps.Point(16.0, 18.0)
);
locationIcons['factoryHover'] = new google.maps.MarkerImage(
'images/factory_over.png',
new google.maps.Size(32.0, 37.0),
null,
new google.maps.Point(16.0, 18.0)
);
locationIcons['office'] = new google.maps.MarkerImage(
'images/office.png',
new google.maps.Size(32.0, 37.0),
null,
new google.maps.Point(16.0, 18.0)
);
locationIcons['officeHover'] = new google.maps.MarkerImage(
'images/office_over.png',
new google.maps.Size(32.0, 37.0),
null,
new google.maps.Point(16.0, 18.0)
);
locationIcons['shadow'] = new google.maps.MarkerImage(
'images/shadow.png',
new google.maps.Size(51.0, 37.0),
null,
new google.maps.Point(16.0, 18.0)
);
var locationData = {'location': [
{
'lat': 52.579924,
'lng': -0.208772,
'type': 'office',
'title': 'xxxx',
'addressl1': 'xxxx',
'addressl2': '',
'city': 'Peterborough',
'pcode': 'PE1 5TP<br />United Kingdom',
'tel': 'xxxx',
'url': 'www.abc.com'
},
{
'lat': -25.522005,
'lng': -49.31824,
'type': 'factory',
'title': 'xxxx',
'addressl1': 'Rua Joao Chede, 2489 - CIC',
'addressl2': '',
'city': 'Curitiba',
'pcode': '81170-220<br/>Brazil',
'tel': 'xxxx',
'url': 'www.abc.com'
},
{
'lat': -23.630333,
'lng': -46.70722,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Rua Alexandre Dumas, 1711',
'city': 'Sao Paulo',
'pcode': '04717-004<br/>Brazil',
'tel': 'xxxx',
'url': 'www.abc.com'
},
{
'lat': 31.520016,
'lng': 120.455351,
'type': 'factory',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Wuxi',
'city': 'Jiangsu',
'pcode': 'P.R. China',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 31.212302,
'lng': 121.420866,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Room 2103, Le Shing International Plaza<br />1319 West Yan An Road',
'city': 'Shanghai',
'pcode': '200050<br />China',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 48.9821,
'lng': 2.513187,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Paris Nord II - Parc des Reflets<br />165 Avenue du Bois de la Pie',
'city': 'Roissy CDG Cedex',
'pcode': 'BP40064, F-95913<br/>France',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 49.99406,
'lng': 9.07277,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Saalaeckerstrasse 4',
'city': 'Kleinostheim',
'pcode': 'D-63801<br />Germany',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 35.67148,
'lng': 139.721313,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': 'AIG Aoyama Building<br />2-11-16 Minami-Aoyama',
'city': 'Minato-ku',
'pcode': 'Tokyo, 107-0062<br/>Japan',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 25.778658,
'lng': -80.2969,
'type': 'office',
'title': 'xxx',
'addressl1': '',
'addressl2': '701 NW 62nd Ave # 200',
'city': 'Miami',
'pcode': 'FL 33126<br />USA',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 52.584728,
'lng': -0.21727,
'type': 'factory',
'title': 'xxx',
'addressl1': '',
'addressl2': '',
'city': 'Peterborough',
'pcode': 'PE1 5FQ<br />United Kingdom',
'tel': 'xxxx',
'url': 'www.abc.com'
},
{
'lat': 53.433981,
'lng': -2.423279,
'type': 'factory',
'title': 'xxx',
'addressl1': '',
'addressl2': 'Northbank Industrial Park',
'city': 'Irlam, Manchester',
'pcode': 'M44 5PP<br />United Kingdom',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 33.230917,
'lng': -84.224603,
'type': 'factory',
'title': 'xxx',
'addressl1': '325 Green Valley Road',
'addressl2': 'Griffin',
'city': 'Georgia',
'pcode': '30224<br />USA',
'tel': 'xxxx',
'url': 'www.abc.com'
},
{
'lat': 1.324992,
'lng': 103.70777,
'type': 'office',
'title': 'xxx',
'addressl1': '14 Tractor Road',
'addressl2': '',
'city': 'Singapore',
'pcode': '627973',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 1.297494,
'lng': 103.631831,
'type': 'factory',
'title': 'xxx',
'addressl1': '2 Tuas View Place #01-04M',
'addressl2': '',
'city': 'Singapore',
'pcode': '637431',
'tel': 'xxx',
'url': 'www.abc.com'
},
{
'lat': 40.837808,
'lng': -89.554571,
'type': 'office',
'title': 'xxx',
'addressl1': 'N4-AC6160',
'addressl2': 'PO Box 610',
'city': 'Mossville<br/>Illinois',
'pcode': '61552-0610<br/>USA',
'tel': 'xxx',
'url': 'www.abc.com'
}
]};
for (var i = 0; i < locationData.location.length; i++) {
//Create varaible to hold location data
var locations = locationData.location[i];
//Create marker
marker = new google.maps.Marker({
position: new google.maps.LatLng(locations.lat, locations.lng),
map: map,
shadow: locationIcons['shadow'],
title: locations.title
});
markers.push(marker);
//Store the type which relates to the icon required in a varaible
var iconImage = locationData.location[i].type
//Set the the normal icon image to the desired type
marker.setIcon(locationIcons[iconImage]);
//Extending the bounds object with each LatLng
(function(i, marker) {
var iconHover = locationData.location[i].type+'Hover';
google.maps.event.addListener(marker, 'mouseover', function() {
marker.setIcon(locationIcons[iconHover])
});
})(i, marker);
(function(i, marker) {
var newIcon = locationData.location[i].type
google.maps.event.addListener(marker, 'mouseout', function() {
marker.setIcon(locationIcons[newIcon])
});
})(i, marker);
(function(i, marker) {
var center = new google.maps.LatLng(locations.lat, locations.lng);
google.maps.event.addListener(marker, 'rightclick', function() {
map.setCenter(center);
});
})(i, marker);
(function(i, marker) {
google.maps.event.addListener(marker, 'click', function() {
if(!infowindow) {
infowindow = new google.maps.InfoWindow();
}
//First we create the container for the content
var content = document.createElement('div');
var p = document.createElement('p');
//We then create a paragraph element that will contain some text
if(locationData.location[i].addressl2 == '') {
p.innerHTML = '<strong>' +locationData.location[i].title +'</strong></br />' +
locationData.location[i].addressl1 + '<br />' +
locationData.location[i].city + '<br />' +
locationData.location[i].pcode + '<br />' +
'<br />' +
locationData.location[i].tel;
} else {
p.innerHTML = '<strong>' +locationData.location[i].title +'</strong></br />' +
locationData.location[i].addressl1 + '<br />' +
locationData.location[i].addressl2 + '<br />' +
locationData.location[i].city + '<br />' +
locationData.location[i].pcode + '<br />' +
'<br />' +
locationData.location[i].tel;
};
//We then create a second paragraph element that will contain the link
var p2 = document.createElement('p');
var p2Spacing = document.createElement('p2');
//Creating the clickable link for zooming in
var zoom = document.createElement('a');
zoom.innerHTML = 'Zoom in';
zoom.href ='#';
zoom.onclick = function() {
map.setCenter(marker.getPosition());
map.setZoom(18);
return false;
};
//Creating the clickable link for the more detail's page
var moreInfo = document.createElement('a');
moreInfo.innerHTML = 'More Info';
moreInfo.href = locationData.location[i].url;
p2Spacing.innerHTML = ' ';
//Appending the link to the second paragraph element
p2.appendChild(zoom);
p2.appendChild(p2Spacing);
p2.appendChild(moreInfo);
//Appending the two paragraphs to the content container
content.appendChild(p);
content.appendChild(p2);
infowindow.setContent(content);
//Opening the Infowindow
infowindow.open(map, marker);
});
})(i, marker);
}
mgr.addMarkers(markers, 1);
}
mgr.refresh();
}) ();