草庐IT

关于 javascript:Google Maps Marker — 设置背景颜色

codeneng 2023-03-28 原文

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'];
$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:

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

原图:

输出图像:

  • 我只希望有一些Javascript,但是谢谢,我猜这是一种可能性。
  • 看看这个例子:blog.mridey.com/2009/09/… 它是关于在标记下创建一个标记标签(OverlayView)。也许您可以根据自己的需要进行调整。
  • 谢谢,您的链接提供了足够的灵感。 :)


我认为莫勒博士是对的

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

要让marker不使用canvas,需要设置optimized为false。

1
2
3
4
5
6
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,您就可以将背景应用于所有标记。

1
2
3
img[src="path/to/custom/marker.png"] {
   background-color: black;
}

我正在使用 Tomas 示例,并对其进行了修改

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


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

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

<编辑/>

要能够使用具有多种颜色的同一图像,只需将颜色添加为 URI 片段,即使使用相同的图像,您也会得到一个唯一的选择器:

JS:

1
2
3
4
5
new google.maps.Marker({
  optimized: false,
  icon: 'path/to/custom/marker.png#red'
  //other properties
});

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 我知道不是你 :) 这不是报复。那是我真的认为你的问题写得不好。顺便说一句,我的回答将是您编写该问题的解决方案。

有关关于 javascript:Google Maps Marker — 设置背景颜色的更多相关文章

  1. ruby - 使用 RubyZip 生成 ZIP 文件时设置压缩级别 - 2

    我有一个Ruby程序,它使用rubyzip压缩XML文件的目录树。gem。我的问题是文件开始变得很重,我想提高压缩级别,因为压缩时间不是问题。我在rubyzipdocumentation中找不到一种为创建的ZIP文件指定压缩级别的方法。有人知道如何更改此设置吗?是否有另一个允许指定压缩级别的Ruby库? 最佳答案 这是我通过查看ruby​​zip内部创建的代码。level=Zlib::BEST_COMPRESSIONZip::ZipOutputStream.open(zip_file)do|zip|Dir.glob("**/*")d

  2. ruby-openid:执行发现时未设置@socket - 2

    我在使用omniauth/openid时遇到了一些麻烦。在尝试进行身份验证时,我在日志中发现了这一点:OpenID::FetchingError:Errorfetchinghttps://www.google.com/accounts/o8/.well-known/host-meta?hd=profiles.google.com%2Fmy_username:undefinedmethod`io'fornil:NilClass重要的是undefinedmethodio'fornil:NilClass来自openid/fetchers.rb,在下面的代码片段中:moduleNetclass

  3. ruby-on-rails - 如何使用 instance_variable_set 正确设置实例变量? - 2

    我正在查看instance_variable_set的文档并看到给出的示例代码是这样做的:obj.instance_variable_set(:@instnc_var,"valuefortheinstancevariable")然后允许您在类的任何实例方法中以@instnc_var的形式访问该变量。我想知道为什么在@instnc_var之前需要一个冒号:。冒号有什么作用? 最佳答案 我的第一直觉是告诉你不要使用instance_variable_set除非你真的知道你用它做什么。它本质上是一种元编程工具或绕过实例变量可见性的黑客攻击

  4. ruby - 在没有 sass 引擎的情况下使用 sass 颜色函数 - 2

    我想在一个没有Sass引擎的类中使用Sass颜色函数。我已经在项目中使用了sassgem,所以我认为搭载会像以下一样简单:classRectangleincludeSass::Script::FunctionsdefcolorSass::Script::Color.new([0x82,0x39,0x06])enddefrender#hamlengineexecutedwithcontextofself#sothatwithintemlateicouldcall#%stop{offset:'0%',stop:{color:lighten(color)}}endend更新:参见上面的#re

  5. ruby-on-rails - 使用 Sublime Text 3 突出显示 HTML 背景语法中的 ERB? - 2

    所以我在关注Railscast,我注意到在html.erb文件中,ruby代码有一个微弱的背景高亮效果,以区别于其他代码HTML文档。我知道Ryan使用TextMate。我正在使用SublimeText3。我怎样才能达到同样的效果?谢谢! 最佳答案 为SublimeText安装ERB包。假设您安装了SublimeText包管理器*,只需点击cmd+shift+P即可获得命令菜单,然后键入installpackage并选择PackageControl:InstallPackage获取包管理器菜单。在该菜单中,键入ERB并在看到包时选择

  6. ruby-on-rails - date_field_tag,如何设置默认日期? [ rails 上的 ruby ] - 2

    我想设置一个默认日期,例如实际日期,我该如何设置?还有如何在组合框中设置默认值顺便问一下,date_field_tag和date_field之间有什么区别? 最佳答案 试试这个:将默认日期作为第二个参数传递。youcorrectlysetthedefaultvalueofcomboboxasshowninyourquestion. 关于ruby-on-rails-date_field_tag,如何设置默认日期?[rails上的ruby],我们在StackOverflow上找到一个类似的问

  7. ruby-on-rails - 使用 Rmagick 或 ImageMagick 在背景上放置标题 - 2

    我有一张背景图片,我想在其中添加一个文本框。我想弄清楚如何将标题放置在其顶部的正确位置。(我使用标题是因为我需要自动换行功能)。现在,我只能让文本显示在左上角,但我需要能够手动定位它的开始位置。require'RMagick'require'Pry'includeMagicktext="Loremipsumdolorsitamet"img=ImageList.new('template001.jpg')img 最佳答案 这是使用convert的ImageMagick命令行的答案。如果你想在Rmagick中使用这个方法,你必须自己移植

  8. ruby-on-rails - 在 Rails 开发环境中为 .ogv 文件设置 Mime 类型 - 2

    我正在玩HTML5视频并且在ERB中有以下片段:mp4视频从在我的开发环境中运行的服务器很好地流式传输到chrome。然而firefox显示带有海报图像的视频播放器,但带有一个大X。问题似乎是mongrel不确定ogv扩展的mime类型,并且只返回text/plain,如curl所示:$curl-Ihttp://0.0.0.0:3000/pr6.ogvHTTP/1.1200OKConnection:closeDate:Mon,19Apr201012:33:50GMTLast-Modified:Sun,18Apr201012:46:07GMTContent-Type:text/plain

  9. ruby 诅咒颜色 - 2

    如何使用Ruby的默认Curses库获取颜色?所以像这样:puts"\e[0m\e[30;47mtest\e[0m"效果很好。在浅灰色背景上呈现漂亮的黑色。但是这个:#!/usr/bin/envrubyrequire'curses'Curses.noecho#donotshowtypedkeysCurses.init_screenCurses.stdscr.keypad(true)#enablearrowkeys(forpageup/down)Curses.stdscr.nodelay=1Curses.clearCurses.setpos(0,0)Curses.addstr"Hello

  10. ruby - Rails 3 的 RGB 颜色选择器 - 2

    状态:我正在构建一个应用程序,其中需要一个可供用户选择颜色的字段,该字段将包含RGB颜色代码字符串。我已经测试了一个看起来很漂亮但效果不佳的。它是“挑剔的颜色”,并托管在此存储库中:https://github.com/Astorsoft/picky-color.在这里我打开一个关于它的一些问题的问题。问题:请建议我在Rails3应用程序中使用一些颜色选择器。 最佳答案 也许页面上的列表jQueryUIDevelopment:ColorPicker为您提供开箱即用的产品。原因是jQuery现在包含在Rails3应用程序中,因此使用基

随机推荐