javascript Google Maps Marker — 设置背景颜色
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19296323/
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
Google Maps Marker — set background color
提问by mustafa.0x
I'm using a transparent PNG as my marker, and would like for the transparent area to be filled a certain color. I previously accomplished this using marker shadows, but those don't work with the visual refresh (i.e. v3.14).
我使用透明的 PNG 作为我的标记，并希望透明区域填充某种颜色。我以前使用标记阴影完成了此操作，但这些不适用于视觉刷新（即 v3.14）。
Thanks!
谢谢！
回答by MrUpsidown
A trick could be to manipulate the PNG image with PHP, if this is an option. The following script takes 4 parameters: the image source, the amount of red, green and blue.
如果这是一个选项，一个技巧可能是使用 PHP 操作 PNG 图像。下面的脚本有4个参数：图片来源，红绿蓝的量。
image.php script:
image.php 脚本：
$src = $_GET['src'];
$r = $_GET['r'];
$g = $_GET['g'];
$b = $_GET['b'];
$image = @imagecreatefrompng($src);
// Create a new true color image with the same size
$w = imagesx($image);
$h = imagesy($image);
$color = imagecreatetruecolor($w, $h);
// Fill the new image with desired color
$bg = imagecolorallocate($color, $r, $g, $b);
imagefill($color, 0, 0, $bg);
// Copy original transparent image onto the new image
imagecopy($color, $image, 0, 0, 0, 0, $w, $h);
// Serve the image
header("Content-type: image/png");
imagepng($color);
imagedestroy($color);
In javascript, call image.php with the desired parameters:
在 javascript 中，使用所需的参数调用 image.php：
var marker = new google.maps.Marker({
position: new google.maps.LatLng(0, 0),
map: map,
icon: 'path/to/image.php?src=http://maps.google.com/mapfiles/marker.png&r=100&g=125&b=255'
});
Original image:
原图：
Output image:
输出图像：
回答by Dr.Molle
Set the optimized-option of the marker to false, then you may apply custom css to the marker-img by using the selector:
将optimized标记的-option设置为 false，然后您可以使用选择器将自定义 css 应用于标记-img：
img[src="path/to/custom/marker.png"]
<edit/>
<编辑/>
to be able to use the same image with multiple colors simply add the color as URI-fragment, then you will get a unique selector even with the same image:
为了能够使用具有多种颜色的相同图像，只需将颜色添加为 URI 片段，那么即使使用相同的图像，您也将获得一个唯一的选择器：
JS:
JS：
new google.maps.Marker({
optimized: false,
icon: 'path/to/custom/marker.png#red'
//other properties
});
CSS:
CSS：
#map-canvas img[src="path/to/custom/marker.png#red"]{
background-color:red;
}
Of course the CSS-rules may also be set dynamically via JS when you don't want to hardcode them, see: styleSheet.insertRule()
当然，当您不想对它们进行硬编码时，也可以通过 JS 动态设置 CSS 规则，请参阅： styleSheet.insertRule()
Demo with multiple background-colors for the same image(including dynamic rule-insertion) :
同一图像具有多种背景颜色的演示（包括动态规则插入）：
回答by allenhwkim
I think Dr. Molle is right
我认为莫尔博士是对的
You simply just apply css to the marker image.
您只需将 css 应用于标记图像。
To make the marker not to use canvas, you need to set optimized to false.
要使标记不使用画布，您需要将优化设置为 false。
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
optimized: false,
icon: "http://i.stack.imgur.com/su8w5.png"
});
With just css set, you can apply background to all markers.
只需设置 css，您就可以将背景应用于所有标记。
img[src="path/to/custom/marker.png"] {
background-color: black;
}
I am using Tomas example, and modified it
我正在使用 Tomas 示例，并对其进行了修改
回答by ct.tan
I have encountered the quite similar issue. I wish to convert my icon background to to transparent instead.
我遇到了非常相似的问题。我希望将我的图标背景转换为透明。
I believe the easiest way is to convert your existing icon (png,jpg,bitmap) to gif format by making the background transparent. You can use the following online toolto help you do it. It is extremely easy.
我相信最简单的方法是通过使背景透明来将现有图标（png、jpg、位图）转换为 gif 格式。您可以使用以下在线工具来帮助您完成此操作。这是非常容易的。
The following is the example of the iconwith transparent output in google map. Hope it helps.
以下是谷歌地图中透明输出的图标示例。希望能帮助到你。
回答by TMS
OK, where's the difficulty? If you want the semi-transparent colors, just create then in the icon, like here I have 50% transparent green:
好的，难点在哪里？如果你想要半透明的颜色，只需在图标中创建，就像这里我有 50% 透明的绿色：
And then put it on the map:
然后把它放在地图上：
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.397, 150.644),
map: map,
icon: "http://i.stack.imgur.com/su8w5.png"
});
