我使用透明 PNG 作为我的标记，并希望透明区域填充某种颜色。我之前使用标记阴影来完成此操作，但这些不适用于视觉刷新（即 v3.14）。
谢谢！
【问题讨论】：
标签： javascript css google-maps google-maps-api-3 google-maps-markers
如果可以的话，一个技巧可能是使用 PHP 操作 PNG 图像。下面的脚本有4个参数：图片来源，红绿蓝的数量。
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);
在 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'
});
原图：
输出图像：
【讨论】：
我认为莫勒博士是对的
您只需将 css 应用于标记图像。
要让marker不使用canvas，需要设置optimized为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"
});
只需设置 css，您就可以将背景应用于所有标记。
img[src="path/to/custom/marker.png"] {
background-color: black;
}
我正在使用 Tomas 示例，并对其进行了修改
【讨论】：
将标记的optimized-选项设置为false，然后您可以使用选择器将自定义css应用到marker-img：
img[src="path/to/custom/marker.png"]
要能够使用具有多种颜色的同一图像，只需将颜色添加为 URI 片段，即使使用相同的图像，您也将获得一个唯一的选择器：
JS：
new google.maps.Marker({
optimized: false,
icon: 'path/to/custom/marker.png#red'
//other properties
});
CSS：
#map-canvas img[src="path/to/custom/marker.png#red"]{
background-color:red;
}
当然，当您不想硬编码时，也可以通过 JS 动态设置 CSS 规则，请参阅：styleSheet.insertRule()
同一张图片有多种背景颜色的演示（包括动态规则插入）：
【讨论】：
optimized-option必须设置为false）。
我遇到了非常相似的问题。我希望将我的图标背景转换为透明。
我相信最简单的方法是通过使背景透明来将现有图标（png、jpg、位图）转换为 gif 格式。您可以使用以下online tool 来帮助您完成此操作。这非常容易。
以下是google map中透明输出的example of the icon。希望能帮助到你。
【讨论】：
好的，困难在哪里？如果你想要半透明的颜色，只需在图标中创建 then，就像这里我有 50% 透明的绿色：
然后放到地图上：
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"
});
【讨论】：