谷歌地图api圆形渐变？

Posted 2023-02-22

【中文标题】谷歌地图api圆形渐变？

【英文标题】：Google maps api Circle gradient?

【发布时间】：2011-03-07 22:08:35

【问题描述】：

我正在向我的地图添加圆形叠加层。我现在可以正确设置颜色、不透明度等。如何实现颜色渐变（即从中心径向向外）？这甚至可能吗？

（我使用的是 api v3，但如果您有 v2 的解决方案，我也很乐意看到）。

【参考方案1】：

您应该可以使用 CSS background:radial-gradient 规则来做到这一点。例如：

background: radial-gradient(ellipse at center,
    rgba(50,255,84,1) 0%, 
    rgba(255,0,0,0.79) 26%, 
    rgba(239,0,235,0.46) 67%,
    rgba(255,255,255,0.2) 100%); 

backbround 属性有许多特定于浏览器的实现，因此使用它看起来有点笨拙。这是一个生成自定义 CSS 颜色渐变以及特定于浏览器的实现的网站：http://www.colorzilla.com/gradient-editor/

获得喜欢的颜色渐变后，您可以根据从 ColorZilla 网站生成的规则集创建一个新的 CSS 类，并在将这些类添加到地图时将这些类应用于覆盖的元素。