正文 

当前位置： 首页 > 源码 >

样式化 MarkerClusterer 图标？

     2023-02-23     127

关键词：

【中文标题】样式化 MarkerClusterer 图标？【英文标题】：Styling MarkerClusterer Icons? 【发布时间】：2011-12-11 16:00:56 【问题描述】：

我正在使用 MarkerCluster.js 在我的 google maps api 中创建集群。集群按照我想要的方式工作，但是我想设置不同于黄色、蓝色和红色圆圈的样式。我试图使用 MarkerStyleOptions，它说你有一组样式，首先是最小的簇图标，最后是最大的。我尝试在下面创建它，但我对使用什么语法感到非常困惑并且找不到任何好的示例。

var clusterStyles = [
    [opt_textColor: 'white'],
    [opt_textColor: 'white'],
    [opt_textColor: 'white']
];

var mcOptions = 
    gridSize: 50,
    styles: clusterStyles,
    maxZoom: 15
;
var markerclusterer = new MarkerClusterer(map, cluster, mcOptions);

【问题讨论】：

这是完全错误的，甚至是变量内部数组的语法 【参考方案1】：

您需要做的是使用 url 指定要使用的图像，而不是当前使用的蓝色/黄色/红色图像。也可能包含高度和宽度选项是个好主意。

var clusterStyles = [
  
    textColor: 'white',
    url: 'path/to/smallclusterimage.png',
    height: 50,
    width: 50
  ,
 
    textColor: 'white',
    url: 'path/to/mediumclusterimage.png',
    height: 50,
    width: 50
  ,
 
    textColor: 'white',
    url: 'path/to/largeclusterimage.png',
    height: 50,
    width: 50
  
];

【讨论】：

嗨，谢谢，:) 是的，我用过这个，效果很好，我知道我只是弄错了你写数组的方式。还有一件事是有没有办法让html标记说一个带有h2和p标签的框，而不是静态图像？ 邓肯，你知道是否可以使用图标而不是图片网址？我的意思是用 google.maps.SymbolPath.CIRCLE、filColor 等构建的图标。 根据the comments in the JS file here 这是不可能的，它只需要一个 URL 这是 textColor，而不是 opt_textColor。 @Emre 是的。看看这里的例子，改变集群样式，看看他们的 JS 看看他们是怎么做到的：googlemaps.github.io/js-marker-clusterer/examples/…【参考方案2】：

发布一个相当有用的答案永远不会太晚，因此您还可以查看整个MarkerClusterer Documentation for IconStyle

更新

还有google maps v3 utility on github ehcanadian 所述

【讨论】：

这是 MarkerClustererPlus，我的理解是它与 MarkerClusterer v3 不同？ 此链接已失效。 这就是为什么仅链接答案没有用。 repo 已移至 github.com/googlemaps/js-marker-clusterer，但 IconStyle 似乎没有进行转换。 链接到 web.archive.org 上的文档。希望这将永久可用web.archive.org/web/20160122183325/http://…

无法在谷歌地图markerclusterer中应用自定义图标进行聚类，因为无法提供位置数据

】无法在谷歌地图markerclusterer中应用自定义图标进行聚类，因为无法提供位置数据【英文标题】：Unabletoapplycustomiconsforclusteringingooglemapsmarkerclustererbecauseunabletoprovidepositiondata【发布时间】：2021-12-2908:31:23【问题描述】：此实用程... 查看详情

需要在样式化的 DateInput 中更改 svg 图标颜色

】需要在样式化的DateInput中更改svg图标颜色【英文标题】：NeedtochangethesvgiconcolorinastyledDateInput【发布时间】：2021-04-2410:33:01【问题描述】：来自索环的样式化DateInput。我试着用这种方式改变颜色。constCalenderComponent=styled(DateInput)`s... 查看详情

样式化组件 + 故事书：当我传递新样式时，SVG 图标不会重新渲染

】样式化组件+故事书：当我传递新样式时，SVG图标不会重新渲染【英文标题】：Styledcomponents+Storybook:SVGIconisnotre-renderingwhenIpassnewstyles【发布时间】：2021-07-2106:20:26【问题描述】：我正在尝试创建一个SvgIcon组件，我通过道具将SVG... 查看详情

使用 Themeprovider 和样式化组件实现暗模式

】使用Themeprovider和样式化组件实现暗模式【英文标题】：implementingdarkmodewithThemeproviderandstyledcomponents【发布时间】：2020-10-2318:20:17【问题描述】：我对样式组件了解不多，我正在使用切换开关来更改主题，并且我的主题确实从深... 查看详情

如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色

】如何在反应、样式化的组件中使用字体真棒图标更改单选按钮的颜色【英文标题】：Howtochangethecolorofradiobuttonwithfontawesomeiconinreact,styledcomponents【发布时间】：2022-01-1520:22:30【问题描述】：我只想改变点击的图标颜色，但点击时... 查看详情

如何在样式化的组件中将 className 传递给 svg

】如何在样式化的组件中将className传递给svg【英文标题】：howtopassclassNametosvginstyledcomponents【发布时间】：2020-10-3018:48:04【问题描述】：我一直在尝试通过样式化组件设置svg图标组件的样式，但遇到了一些问题，但它不起作用。... 查看详情

图标字体化浅谈[转]

...是纯色的。开始制作时考虑用双倍大小的Sprite图，通过CSS样式设置只显示二分之一尺寸，这样在Retina屏上显示的大小是正常的，一旦放大 查看详情

神奇的图标字体化！

...作时可以考虑使用双倍大小的Sprite图（雪碧图），通过CSS样式设置只显示二分之一尺寸，这 查看详情

单击缩放上的markerClusterer

】单击缩放上的markerClusterer【英文标题】：markerClustereronclickzoom【发布时间】：2011-08-0807:25:05【问题描述】：我刚刚在我的谷歌地图中添加了一个MarkerClusterer。它工作得很好。我只是想知道单击集群时是否有任何方法可以调整放... 查看详情

将自定义标记放在 markerclusterer

】将自定义标记放在markerclusterer【英文标题】：Placecustommarkerovermarkerclusterer【发布时间】：2021-08-1006:58:54【问题描述】：我正在使用googlemapsapi3和agm（角度谷歌地图）在地图上放置许多自定义标记。其中一些标记的优先级较低，... 查看详情

在 React 中使用样式组件在图标旁边显示文本

】在React中使用样式组件在图标旁边显示文本【英文标题】：DisplayingtextnexttoaniconusingstyledcomponentsinReact【发布时间】：2021-07-2622:25:32【问题描述】：React新手并使用样式化组件，但我正在构建一个标题组件，它基本上有两个黑条-... 查看详情

样式化输入字段：在里面添加自定义按钮

】样式化输入字段：在里面添加自定义按钮【英文标题】：Stylinganinputfield:addingcustombuttonsinside【发布时间】：2021-08-2507:34:27【问题描述】：我有一个看起来像这样的输入：到目前为止，我已经使用了这段代码，使用Styled-Components... 查看详情

同一个地方有多个标记 - MarkerClusterer

】同一个地方有多个标记-MarkerClusterer【英文标题】：Morethanonemarkeronsameplace-MarkerClusterer【发布时间】：2013-12-2717:52:23【问题描述】：我正在使用MarkerClusterer。当我在完全相同的位置有两个或多个标记时，API仅显示1个标记-顶部的... 查看详情

Google MAP API，对 MarkerClusterer 的限制

】GoogleMAPAPI，对MarkerClusterer的限制【英文标题】：GoogleMAPAPI,limitontheMarkerClusterer【发布时间】：2018-05-0707:04:47【问题描述】：我有一张包含大约2000个标记的地图。我正在使用MarkerClusterer系统来加入他们并只显示我需要的内容。但... 查看详情

从 markerClusterer 中删除标记

】从markerClusterer中删除标记【英文标题】：RemovemarkersfrommarkerClusterer【发布时间】：2014-05-2415:38:15【问题描述】：我正在尝试创建一个带有集群的交互式地图，当用户选中一个框时需要显示该地图，并在再次取消选中该框时将其... 查看详情

Google map API：仅将 MarkerClusterer 应用于特定标记的类别

】GooglemapAPI：仅将MarkerClusterer应用于特定标记的类别【英文标题】：GooglemapAPI:applyMarkerClustereronlytoacategoryofspecificmarkers【发布时间】：2018-04-1501:14:09【问题描述】：使用MarkerClusterer，我想只对一类标记进行聚类。我这里有10个标... 查看详情

如何将 CSS 添加到“不是第一个”呈现的样式化组件

】如何将CSS添加到“不是第一个”呈现的样式化组件【英文标题】：HowtoaddCSSto"notthefirst"renderedStyledComponent【发布时间】：2021-11-0200:18:03【问题描述】：我有一个样式非常独特的组件。该组件基本上呈现水平行（带有2个输... 查看详情

谷歌地图：在markerclusterer上方渲染标记

】谷歌地图：在markerclusterer上方渲染标记【英文标题】：GoogleMaps:Rendermarkerabovemarkerclusterer【发布时间】：2012-05-0121:34:28【问题描述】：我有一组标记聚集在我的地图上。另一组标记单独显示，我碰巧需要将这些标记显示在群集... 查看详情