6

这真的让我很烦恼 - 很多。

在浏览了谷歌地图 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 片盒子,然后分别制作箭头;我的意思是,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...
})
4

3 回答 3

1

你试过信息框吗?

http://googlegeodevelopers.blogspot.com/2010/04/infobox-10-highly-customizable.html

还是信息泡泡?

http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobubble/examples/example.html/

它们都让您对信息窗口的外观有更多的控制,同时仍然抽象了一些复杂的部分。

缺少元素类是 API 的(好的)设计决策。它消除了与用户定义的类发生冲突的可能性。

于 2011-08-20T23:54:34.593 回答
1

经过多次尝试和错误,我决定解决这个问题的最佳方法是使用 OverlayView 类并简单地自定义构建一个容器。好吧,“简单”是一种轻描淡写的说法,但它确实有效。现在我可以完全控制布局和功能。

于 2011-08-24T23:26:52.043 回答
0

您尝试使用 CSS 进行样式设置?下面的示例显示了这一点。这是更改 UI 最直接的方法。

http://code.google.com/apis/maps/documentation/javascript/overlays.html#InfoWindows

于 2011-08-19T04:00:14.160 回答