Google Maps Marker — set background color
我正在使用透明 PNG 作为我的标记，并希望透明区域填充某种颜色。我之前使用标记阴影完成了此操作，但这些不适用于视觉刷新(即 v3.14)。
谢谢！
- 制作您自己的自定义叠加层。
- @geocodezip 我查看了文档和 USGS 示例，但仍不确定如何最好地实施这种方法。任何帮助，将不胜感激。
- @geocodezip 如果您有时间进一步澄清，我在这个问题上获得了 50 分的奖励。
如果可以的话，可以使用 PHP 来操作 PNG 图像。下面的脚本有 4 个参数：图像源，红绿蓝的数量。
image.php 脚本：
|
1
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
$src = $_GET[‘src’];
$r = $_GET[‘r’]; $image = @imagecreatefrompng($src); // Create a new true color image with the same size // Fill the new image with desired color // Copy original transparent image onto the new image // Serve the image |
在 javascript 中，使用所需参数调用 image.php：
|
1
2 3 4 5 |
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:
|
1
2 3 |
#map–canvas img[src=“path/to/custom/marker.png#red”]{
background–color:red; } |
当然，当您不想硬编码时，也可以通过 JS 动态设置 CSS 规则，请参阅：styleSheet.insertRule()
同一张图片有多种背景颜色的演示(包括动态规则插入)：
http://jsfiddle.net/doktormolle/vngp1hdr/
- 此解决方案不太适合，因为多个标记使用相同的标记图标。
- 不确定版本更新是否改变了这一点，但我似乎找不到任何带有图标的 img 标签；可能它们被用作背景图像，所以这不再起作用了吗？
- 它仍然对我有用，添加了一个演示(注意标记的 optimized-选项必须设置为 false)。
我遇到了非常相似的问题。我希望将我的图标背景转换为透明。
我相信最简单的方法是通过使背景透明来将现有图标(png、jpg、位图)转换为 gif 格式。您可以使用以下在线工具来帮助您完成此操作。这非常容易。
以下是google map中透明输出的图标示例。希望能帮助到你。
好的，困难在哪里？如果你想要半透明的颜色，只需在图标中创建 then，就像这里我有 50% 透明的绿色：
然后放到地图上：
http://jsfiddle.net/Qrj2n/
|
1
2 3 4 5 |
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” }); |
- 我想设置标记的背景颜色，而不是图标的背景颜色。这样，我不必为存在的每种十六进制颜色创建一个图标。
- @mustafa.0x 那么你的问题应该更清楚。您写道 *”我使用透明 PNG 作为我的标记，并希望透明区域填充某种颜色” – 这表明您正在谈论 PNG 的透明区域！对不起，但这是一个写得很糟糕的问题。你应该描述你想要什么以及为什么，我们不是来猜测你的想法。
- 哈哈，厚脸皮是不是？ :) 我没有对你投反对票；没必要刻薄。
- @mustafa.0x 我知道不是你 :) 这不是报复。那是我真的认为你的问题写得不好。顺便说一句，我的回答将是您编写该问题的解决方案。
来源：https://www.codenong.com/19296323/
