为什么google的infoWindow CSS没有曝光?定制太难了

时间:2011-08-19 01:31:07

标签: css google-maps google-maps-api-3 customization infowindow

这真让我烦恼 - 很多。

在浏览了谷歌地图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视觉效果与标记一样简单。

感谢您的调整!快乐的评论。

与此同时,我将使用黑客攻击这些疯狂的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...
})

3 个答案:

答案 0 :(得分:1)

你试过InfoBox吗?

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

或InfoBubble?

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

它们都可以让你更多地控制信息窗口的外观,同时仍然抽象出一些复杂的部分。

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

答案 1 :(得分:1)

经过多次试验和反复,我决定解决这个问题的最佳方法是使用OverlayView类,只需自定义构建一个容器。嗯,“简单”是轻描淡写,但它的确有效。现在我可以完全控制布局和功能。

答案 2 :(得分:0)

您尝试使用CSS样式?以下示例显示了这一点。这是更改UI的最直接方式。

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