【问题标题】:Google Maps Api v3, custom Cluster iconGoogle Maps Api v3,自定义集群图标
【发布时间】:2011-05-23 21:34:22
【问题描述】:

如何更改集群图标?我希望有相同的图标,但颜色不是蓝色。

【问题讨论】:

标签: google-maps-api-3 icons google-maps-markers markerclusterer


【解决方案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);

【讨论】:

  • 看起来每个标记的属性列表中都缺少逗号...来自 FireFox Error: missing } after property list
  • 旧答案,图像上的 404
  • 您也可以使用“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";
    

    【讨论】:

    【解决方案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);
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2011-05-14
      • 2011-06-03
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-03-11
      • 2013-01-27
      相关资源
      最近更新 更多