Question

我使用透明的PNG作为我的标记，并希望透明区域填充某种颜色。我之前使用标记阴影完成了这项操作，但这些不适用于视觉刷新（即v3.14）。

谢谢！

Answer 1

如果这是一个选项，一个技巧可能是用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'
});

原始图片：

Original image

输出图片：

Output image

Answer 2

将标记的optimized - 选项设置为false，然后您可以使用选择器将自定义css应用于marker-img：

img[src="path/to/custom/marker.png"]

＆LT;编辑/＆GT;

为了能够使用具有多种颜色的相同图像，只需将颜色添加为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()

为同一图像演示多种背景色（包括动态规则插入）：

http://jsfiddle.net/doktormolle/vngp1hdr/

Answer 3

我认为Molle博士是对的

您只需将css应用于标记图像。

要使标记不使用画布，您需要将optimize设置为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示例，并对其进行了修改

http://jsfiddle.net/Qrj2n/2/

Answer 4

我遇到过类似的问题。我希望将我的图标背景转换为透明。

我认为最简单的方法是通过使背景透明来将现有图标（png，jpg，位图）转换为gif格式。您可以使用以下online tool来帮助您完成此操作。这非常容易。

以下是Google地图中具有透明输出的example of the icon。希望能帮助到你。

Answer 5

好的，难度在哪里？如果你想要半透明的颜色，只需在图标中创建，就像这里我有50％透明绿色：

enter image description here

然后把它放在地图上：

http://jsfiddle.net/Qrj2n/

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"
});

Google地图标记 - 设置背景颜色

5 个答案:

＆LT;编辑/＆GT;