3

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

谢谢!

4

5 回答 5

3

如果可以的话,一个技巧可能是使用 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'
});

原图:

原始图像

输出图像:

输出图像

于 2013-12-26T02:36:25.040 回答
1

我认为莫勒博士是对的

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

要使标记不使用画布,您需要将优化设置为 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/

于 2013-12-29T05:27:50.747 回答
1

optimized标记的-option设置为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;
}

当然,当您不想硬编码 CSS 规则时,也可以通过 JS 动态设置它们,请参阅:styleSheet.insertRule()

同一张图片有多种背景颜色的演示(包括动态规则插入):

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

于 2013-10-10T13:27:10.410 回答
0

我遇到了非常相似的问题。我希望将我的图标背景转换为透明。

我相信最简单的方法是通过使背景透明来将现有图标(png、jpg、位图)转换为 gif 格式。您可以使用以下在线工具来帮助您完成此操作。这非常容易。

以下是google map中透明输出的图标示例。希望能帮助到你。

于 2015-11-26T01:58:18.977 回答
-2

好的,难在哪里?如果你想要半透明的颜色,只需在图标中创建 then,就像这里我有 50% 透明的绿色:

在此处输入图像描述

然后把它放在地图上:

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"
});
于 2013-12-25T18:53:45.093 回答