Google Maps api v3 (Javascript)：信息窗口中的图像答案

【问题标题】：Google Maps api v3 (Javascript): Image in infowindowGoogle Maps api v3 (Javascript)：信息窗口中的图像
【发布时间】：2012-05-27 10:41:02
【问题描述】：

我正在尝试建立一个网站，并且我想要一个地图，其中包含多个标记（具有不同颜色）并使用复选框进行过滤。我正在研究这个例子：

http://www.geocodezip.com/v3_MW_example_categories.html

我已经对其进行了一些更改，并删除了侧边栏。它对我很有用，但我将如何在信息窗口中放置图像有点令人困惑。我想在信息窗口中有一个缩略图大小的图像和一个小评论。这个例子有一个外部 xml 文件http://www.geocodezip.com/categories.xml，带有一个标签和几个属性，如名称、id、地址、类别。它还使用外部 js 文件，但这并不困扰我。

我正在考虑创建一个名为 content 的数组并将图像放在那里，然后在 for 中调用它（第 195 行）。类似于创建一个名为 content () 的新变量；并将其添加到 var html(); （第 202 行）。但这行不通。例如，我还想过在名称“照片”上放置一个属性。但是地图甚至没有显示在页面上。

显然我不是程序员，我的技术也不是很好。如果有人对此有任何线索，我将不胜感激！也对不起我的英语。谢谢你:)

【问题讨论】：

标签： javascript google-maps-api-3 google-maps-markers infowindow

【解决方案1】：

我可以为你写页面，但那会有什么乐趣呢？ ;)

首先，可以从这里获取标记：

https://sites.google.com/site/gmapsdevelopment/ Ctrl-查找“ms/micons”。

还有Google Chart Icons，但现在已弃用。

我建议查看this page。它具有分组的复选框，您可以删除不需要的内容，就像您提到的那样，侧边栏。诀窍是它使用 Ajax 从this xml 检索标记信息。您可以采用相同的方法，或者直接在 JavaScript 文件中创建数据数组。

关于 InfoWindow 中的图像，只需在 myInfoWindow.setContent(html) 的 html 中放置一个“img src”标签即可。如果你能指出哪里出了问题，我会看看。当地图不显示时，通常会有一个 JavaScript 错误，您的浏览器控制台会告诉您。（Firefox 中的 Firebug，Chrome 中的 Ctrl+Shift+I 或 F12）

【讨论】：

感谢您的回答！！！...实际上，我已经下载了我的标记并将它们保存在本地，我无法在 infowindow.setContent(html) 上放置“img src”标签，因为如果它工作它只适用于一个 pisture 并且我是每个信息窗口的不同照片......我希望每个标记都有不同的图像。这个例子看起来很简单，很有用的想法！！！ :) 再次感谢！
@JavascriptGeek 如果您可以在每个信息窗口中显示不同的文本，您应该能够获得不同的图像。 Javascript 有一个令人头疼的“特性”，如果你在 for 循环中创建它们，包装一个 (function(i) { ... })(i);围绕创作将纠正行为。尝试我链接的文件中的方法，您应该能够获得多个图像。即使这样，如果您希望我帮助处理 infowindows 中的图片，您也可以编辑您的问题并在此处发表另一条评论以提醒我。
莉莉娜，我刚刚做到了！！谢谢！！不幸的是，我是新成员，我不能留下代表 :( 干杯，再次感谢您的帮助！
@JavascriptGeek 好样的！！感谢您接受我的回答，并让您更接近能够投票:) 欢迎您来这里！

【解决方案2】：

可以使用图像创建自定义标记here。

【讨论】：

很久以来一直在寻找这样的东西。发送