如何更改集群图标?我希望有相同的图标,但有蓝色以外的其他颜色。
初始化 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);
Google 更改了他的存储库。最新的集群存储库是:https://github.com/googlemaps/js-marker-clusterer 图片: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
}]}
快捷方式覆盖图像路径,如下所示:
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
这是原图
markerClusterOptions = {styles: [{
height: 53,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m1.png",
width: 53
},
{
height: 56,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m2.png",
width: 56
},
{
height: 66,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m3.png",
width: 66
},
{
height: 78,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m4.png",
width: 78
},
{
height: 90,
url: "https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m5.png,
width: 90
}]}
markerCluster = new MarkerClusterer(map, markers,markerClusterOptions);
这是为集群创建自定义图标的代码
const algorithm = new SuperClusterAlgorithm({
maxZoom: this.maxZoom,
radius: 150,
minZoom: 0,
zoomOnClick:false
});
const renderer = {
render: function ({ count, position }) {
return new google.maps.Marker({
label: {text: count.toString(), color: 'white', fontSize: '12px'},
position,
icon: 'icon1.png',
title: 'Zoom in to view resources in this area',
// adjust zIndex to be above other markers
zIndex: Number(google.maps.Marker.MAX_ZINDEX) + count,
});
}
};
this.markerCluster = new MarkerClusterer({
map: this.map,
markers: this.markers,
algorithm: algorithm,
renderer:renderer
});