javascript 为 Google 标记添加透明度
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/6703794/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Add transparency to a Google Marker
提问by Sergiu
I have a marker that looks like the on in this tutorial : http://www.powerhut.co.uk/googlemaps/custom_markers.php
我有一个看起来像本教程中的标记:http: //www.powerhut.co.uk/googlemaps/custom_markers.php
Can I add transparency to this marker ?
我可以为这个标记添加透明度吗?
I've looked over the net and failed to find something that would help me in this issue. In Bing Maps I can do something like this :
我查看了网络,但没有找到可以帮助我解决这个问题的东西。在 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);
Thank you.
谢谢你。
回答by sabes
回答by Steffen Müller
You can add transparency as you wish as this is a PNG file. PNG files can have transparency. Just edit the image file with photoshop or the like.
您可以根据需要添加透明度,因为这是一个 PNG 文件。PNG 文件可以具有透明度。只需使用 photoshop 或类似软件编辑图像文件。
回答by flyingL123
It looks like this is possible in version 3.21 of the Google Maps API:
看起来这在 Google Maps API 的 3.21 版中是可能的:
https://developers.google.com/maps/documentation/javascript/reference?csw=1#MarkerOptions
https://developers.google.com/maps/documentation/javascript/reference?csw=1#MarkerOptions
You can either use the setOpacity()
opacity method or pass in the opacity as an option when creating the marker.
setOpacity()
在创建标记时,您可以使用不透明度方法或传入不透明度作为选项。
回答by SF.
Sounds like it's a common PNG with an alpha channel. No fancy software work, just plain gfx editing. GIMP can do this. "Layer"->"Transparency"->"Add alpha channel", then use "eraser" tool to remove whatever you want, or layer opacity to make layer partially transparent, or adjust Alpha channel in curves... anyway, "checkerboard" background means transparency. Save as PNG and you're done.
听起来像是带有 alpha 通道的普通 PNG。没有花哨的软件工作,只是简单的 gfx 编辑。GIMP 可以做到这一点。“图层”->“透明度”->“添加 alpha 通道”,然后使用“橡皮擦”工具删除你想要的任何东西,或者图层不透明度使图层部分透明,或者调整曲线中的 Alpha 通道......无论如何,“棋盘” " 背景意味着透明度。另存为 PNG,您就完成了。
回答by user1483639
I ran into the similar problem and solved it loading transparent png's trough a php request and pass a 'transparency' variable trough get.
我遇到了类似的问题,并解决了它通过 php 请求加载透明 png 的槽并通过 get 传递“透明”变量。
like: pathtoyourphpfile/index.php?input=darkcyan_0c.png&transparency=40 where 'input' is the original image and 'transparency' is the amount % of transparency you want. In this case it outputs 'output-40.png'
如:pathtoyourphpfile/index.php?input=darkcyan_0c.png&transparency=40 其中“输入”是原始图像,“透明度”是您想要的透明度百分比。在这种情况下,它输出“output-40.png”
I used imagick to process the png. A very simple example without image paths:
我使用 imagick 来处理 png。一个没有图像路径的非常简单的例子:
$percent = $_GET[transparency]; $transparency = 100 / $percent; $command = "/usr/bin/convert ".$_GET[input]." -channel Alpha -evaluate Divide {$transparency} output-{$transparency}.png"; $output = shell_exec($commando1);
but you could also use php's GD library to adjust png's transparency
但你也可以使用 php 的 GD 库来调整 png 的透明度