我正在使用和调整Store Locator Library for Maps API中的示例/演示。
我想在我的地图中添加群集标记。我认为与此相关的代码部分是:
var ICON = new google.maps.MarkerImage(pathImage,null,null,new google.maps.Point(14,13)); var SHADOW = new google.maps.MarkerImage(pathShadow,null,null,new google.maps.Point(14,13));
google.maps.event.addDomListener
(
window,
'load',
function()
{
var map = new google.maps.Map
(
document.getElementById( canvasLoc ),
{
center: new google.maps.LatLng( 53.64, -3.3 ),
zoom: 6,
navigationControlOptions: {
style: google.maps.NavigationControlStyle.SMALL},
mapTypeId: google.maps.MapTypeId.ROADMAP
}
);
var panelDiv = document.getElementById( panelLoc );
var data = new CustomDataSource;
var view = new storeLocator.View
(
map,
data,
{
geolocation: false,
features: data.getFeatures()
}
);
map.setOptions({styles: styles});
view.createMarker =
function( store )
{
var markerOptions =
{
position: store.getLocation(),
icon: ICON,
shadow: SHADOW,
title: store.getDetails().title
};
return new google.maps.Marker( markerOptions );
}
var infoBubble = new InfoBubble({
maxWidth: 300,
arrowSize: 20,
borderWidth: 8,
borderColor: 'rgb(255,255,255)',
backgroundColor: 'rgba(204,204,204, 0.7)'
});
view.getInfoWindow =
function( store )
{
if( !store )
{
return infoBubble;
}
var details = store.getDetails();
var html =
[
'<div class="store"><div class="title">',
details.title,
'</div><div class="address">',
details.address,
'</div>',
'<div class="hours misc">',
details.hours,
'</div></div>'
].join('');
infoBubble.setContent( $( html )[0] );
return infoBubble;
};
new storeLocator.Panel
(
panelDiv,
{
view: view
}
);
}
);
以上内容取自custom.js
我无法确切地知道应该在哪里放置Marker集群的代码(给出here的示例)。它说我需要将标记添加到数组中,并将其与地图一起传递给MarkerClusterer对象。
以下是我能想到的最好的:
var view = new storeLocator.View
(
map,
data,
{
geolocation: false,
features: data.getFeatures()
}
);
map.setOptions({styles: styles});
var markers=[];
view.createMarker =
function( store )
{
var markerOptions =
{
position: store.getLocation(),
icon: ICON,
shadow: SHADOW,
title: store.getDetails().title
};
return new google.maps.Marker( markerOptions );
}
markers.push(view.createMarker);
markerClusterer = new MarkerClusterer(map, markers)