Google Maps Api v3,自定义集群图标
Posted
技术标签:
【中文标题】Google Maps Api v3,自定义集群图标【英文标题】:Google Maps Api v3, custom Cluster icon 【发布时间】:2011-05-23 21:34:22 【问题描述】:如何更改集群图标?我希望有相同的图标,但颜色不是蓝色。
【问题讨论】:
这些图标不再在 Google 的服务器上。 他们将 repo 更改为 git hub 这里是 icone github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images @Kaippally 我已经在下面的 SO 帖子 what is the alternate source path for google markerclusterer.js library? 中介绍了一个解决方案 【参考方案1】:您需要在初始化 MarkerClusterer 对象时使用样式参数 - 下面的代码显示了默认样式,因此如果您想重新着色其中一个图标,只需将相关 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);
【讨论】:
看起来每个标记的属性列表中都缺少逗号...来自 FireFoxError: missing after property list
。
旧答案,图像上的 404
新图片网址为“github.com/googlemaps/js-marker-clusterer/tree/gh-pages/images”
您也可以使用“anchor”作为文本位置,“textColor”作为文本颜色,“textSize”作为大小。示例:锚点:[3, 0],textColor:'#ff00ff',textSize:10【参考方案2】:
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
]
【讨论】:
【参考方案3】:一个快捷方式覆盖图像路径,如下所示:
MarkerClusterer.prototype.MARKER_CLUSTER_IMAGE_PATH_ =
"https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m";
【讨论】:
以上图片路径不正确raw.githubusercontent.com/googlemaps/v3-utility-library/master/… 很棒的解决方案,只需使用本地路径而不是原始 github 内容 url。【参考方案4】:这是原图
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);
【讨论】:
以上是关于Google Maps Api v3,自定义集群图标的主要内容,如果未能解决你的问题,请参考以下文章
是否可以在Google Maps API v3上编写自定义文字?
是否可以在 Google Maps API v3 上编写自定义文本?
Google Maps API v3:在Firefox中未触发自定义标记的点击事件
如何自定义附近地点搜索返回的结果,Google Maps JS API V3