Google maps api 3 谷歌地图Api v3,自定义集群图标
如何更改群集图标?我希望有相同的图标,除了蓝色之外还有其他颜色。初始化MarkerClusterer对象时需要使用styles参数-下面的代码显示默认样式,因此如果您想重新调用其中一个图标,只需将相关url更改为您的图像Google maps api 3 谷歌地图Api v3,自定义集群图标,google-maps-api-3,icons,google-maps-markers,markerclusterer,Google Maps Api 3,Icons,Google Maps Markers,Markerclusterer,如何更改群集图标?我希望有相同的图标,除了蓝色之外还有其他颜色。初始化MarkerClusterer对象时需要使用styles参数-下面的代码显示默认样式,因此如果您想重新调用其中一个图标,只需将相关url更改为您的图像 //set style options for marker clusters (these are the default styles) mcOptions = {styles: [{ height: 53, url: "http://google-maps-utility
//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);
谷歌改变了他的回购协议。最新的集群回购协议是: 图像:
您还可以考虑下载源并从本地路径提供链接。这样,您就可以更好地控制应用程序所需的资源
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);
每个标记的属性列表中似乎缺少逗号。。。从FireFox属性列表后的
错误:丢失}。旧答案,图像上的404新图像url为“”,您还可以使用“锚定”表示文本位置,“textColor”表示文本颜色,“textSize”表示大小。示例:anchor:[3,0],textColor:“#ff00ff”,textSize:10上述图像路径不正确,只需使用本地路径,而不是原始的github内容url。这些图标不再位于Google服务器上。它们将repo更改为git hub这里是icone@Kaippally,我在下面的文章中介绍了解决方案