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

Question

我该如何更改群集图标？我喜欢有相同的图标,其他颜色比蓝色.

Answer 1

初始化MarkerClusterer对象时需要使用styles参数 - 下面的代码显示默认样式,因此如果要重新着色其中一个图标,只需将相关URL更改为图像...

//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: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m2.png",
width: 56
},
{
height: 66,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m3.png",
width: 66
},
{
height: 78,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m4.png",
width: 78
},
{
height: 90,
url: "https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images/m5.png",
width: 90
}]}

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

Answer 2

谷歌改变了他的回购.最新的集群回购是:https://github.com/googlemaps/js-marker-clusterer images:https://github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images

您也可以考虑下载源并从本地路径提供链接.这样您就可以更好地控制应用程序所需的资源.

local_path "/pucblic/"
mcOptions = {styles: [{
height: 53,
url: local_path+"m1.png",
width: 53
},
{
height: 56,
url: local_path+"m2.png",
width: 56
},
{
height: 66,
url: local_path+"m3.png",
width: 66
},
{
height: 78,
url: local_path+"m4.png",
width: 78
},
{
height: 90,
url:  local_path+"m5.png",
width: 90
}]}