【问题标题】:Add transparency to a Google Marker为 Google 标记添加透明度
【发布时间】:2011-07-15 07:22:36
【问题描述】:

我有一个看起来像本教程中的 on 的标记: http://www.powerhut.co.uk/googlemaps/custom_markers.php

我可以为这个标记添加透明度吗?

我查看了网络,但没有找到可以帮助我解决此问题的内容。 在 Bing 地图中,我可以执行以下操作:

var veCustomIco = new VECustomIconSpecification();
veCustomIco.CustomHTML= "<img src='" + url + "' style='filter: Alpha(opacity=10);-moz-opacity: 0.1;opacity: 0.10;'/>";
pin.SetCustomIcon(veCustomIco);

谢谢。

【问题讨论】:

  • 很抱歉,我没有清楚地暴露我的问题。我有一个 PNG 图像(我无法编辑)。我的问题是,谷歌地图的 API 中是否有某种方法可以根据给定值将透明度应用于我的图像。

标签: javascript transparency google-maps-markers


【解决方案1】:

【讨论】:

  • 这应该在答案中。使用 Google Maps API 确实无法设置 Sergiu(和我)想要的 样式属性。
  • 我猜文档已经改变,它现在在 MarkerOptions 中显示 opacity,所以应该是可能的..
【解决方案2】:

您可以根据需要添加透明度,因为这是一个 PNG 文件。 PNG 文件可以具有透明度。只需使用 Photoshop 等编辑图像文件即可。

【讨论】:

    【解决方案3】:

    看起来这在 Google Maps API 3.21 版中是可能的:

    https://developers.google.com/maps/documentation/javascript/reference?csw=1#MarkerOptions

    您可以使用setOpacity() opacity 方法或在创建标记时将不透明度作为选项传入。

    【讨论】:

      【解决方案4】:

      听起来像是带有 Alpha 通道的常见 PNG。没有花哨的软件工作,只是简单的 gfx 编辑。 GIMP 可以做到这一点。 “图层”->“透明度”->“添加Alpha通道”,然后使用“橡皮擦”工具删除您想要的任何内容,或使用图层不透明度使图层部分透明,或调整曲线中的Alpha通道......无论如何,“棋盘" 背景意味着透明度。保存为 PNG 就完成了。

      【讨论】:

        【解决方案5】:

        我遇到了类似的问题并解决了它通过 php 请求加载透明 png 并通过 get 传递“透明度”变量。

        like: pathtoyourphpfile/index.php?input=darkcyan_0c.png&transparency=40 其中“input”是原始图像,“transparency”是您想要的透明度百分比。在这种情况下,它输出 'output-40.png'

        我使用 imagick 来处理 png。 一个非常简单的没有图片路径的例子:

        $percent = $_GET[透明度];
        $透明度 = 100 / $百分比;
        $command = "/usr/bin/convert ".$_GET[input]." -channel Alpha -evaluate Divide {$transparency} output-{$transparency}.png";
        $output = shell_exec($commando1);
        

        但你也可以使用 php 的 GD 库来调整 png 的透明度

        【讨论】:

        • 您不应该将 $_GET 变量或其他用户输入直接传递给可执行命令。如果您实际上在实时网站上的脚本上使用了上述代码,那么任何人都可以轻松地使用它在您的服务器上运行他们想要的任何命令。图像应提前创建并保存为静态文件,而不是在每次新请求时创建。
        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2011-04-18
        • 2011-09-16
        • 2023-03-11
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2012-12-31
        相关资源
        最近更新 更多