且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

Google Maps Api v3,自定义集群图标

更新时间:2022-11-20 10:31:38

初始化MarkerClusterer对象时,需要使用styles参数 - 下面的代码显示了默认样式,所以如果您想重新选择其中一个图标,只需将相关url更改为图片即可。

You need to use styles parameter when initializing MarkerClusterer object - the code below shows default styles so if you want to recolour one of the icons just change the relevant url to your image...

//set style options for marker clusters (these are the default styles)
mcOptions = {styles: [{
height: 53,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m1.png",
width: 53
},
{
height: 56,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m2.png",
width: 56
},
{
height: 66,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m3.png",
width: 66
},
{
height: 78,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m4.png",
width: 78
},
{
height: 90,
url: "http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/images/m5.png",
width: 90
}]}

//init clusterer with your options
var mc = new MarkerClusterer(map, markers, mcOptions);