【发布时间】：2011-10-30 06:30:12
【问题描述】：
这真的让我很烦恼 - 很多。
在浏览了谷歌地图 v3 在 firebug 中生成的客户端代码之后，我正准备开车上街，让其中一些工程师了解一下我的想法... arrrgh :P
infowWindow 类生成的 HTML 我个人认为简直是疯了。也许有人可以帮助我理解它。
infowWindow HTML 结构是这样的：
#map_canvas > div > div > div > div > div // 5 levels of elements,
no big deal here, ok...
> div // top left corner
div // top right corner
div // bottom left corner
div // bottom right corner
// now comes fun stuff for the speech bubble arrow:
div
div
div
div
div
div
div
div
div
div
// the 10 divs above are stacked diagonally with odd sizes to make this arrow.
i'm sorry but WHY?!? is it done like that? I suppose they wanted the user to be
able to grab the map even right next to the arrow. Think about this: do users
really need to be able to not grab the arrow? if grabbing the arrow causes map pan,
as is the case for the shadow images, would that really be a problem?
div // bottom middle for image background border or something
div // top middle
div // middle
div // bottom middle, again
div // entire block of the infoWindow, probably the container
> img // close box
div // center block with the contents of the infoWindow
div // text content container
哇——太疯狂了！
注意没有真正的语义结构，而且 - 天哪，我敢有这样的 假设 - 任何地方都没有类名，什么都没有。我想也许他们有一些 一种 9-slice box 继续，然后分别产生箭头；我是说， iw3.png 中的图像精灵肯定不会是这里的问题。
我非常希望对这个 api 有影响的人遇到这个并且 希望谷歌最终会找到一种方法来解决这个问题 infoWindow 的视觉效果就像标记一样简单。
感谢收看！愉快的评论。
同时，我将使用 hack 来获取这些疯狂的 div 并让它们按照我的要求行事。
之前我在其他帖子上发表过评论，我认为在 API 中要求一种方法让您使用自定义 UI 而不像当前需要的那样使用几乎复制整个窗口对象的方法应该不会太过分（参见 google 扩展类 v3）。
google.maps.infoWindow.setStyle({
'topleft' : {
'background' : 'url(images/windowsprite.png) 0 0 no-repeat',
'width' : '10px',
'height' : '10px'
},
'topRight' : {
...etc...
}
...etc...
})
【问题讨论】：
标签： css google-maps google-maps-api-3 customization infowindow