首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

自定义google 地图s 的infowindow

2012-10-28 
自定义google maps 的infowindow?? 英文版世博订房网第二期要加上地图搜索,我和另外一个同事完成了有关地

自定义google maps 的infowindow

?? 英文版世博订房网第二期要加上地图搜索,我和另外一个同事完成了有关地图搜索、酒店位置在地图展示等功能后,老总觉得google map默认的消息展示窗口infowindow太难看了,给了一个他认为比较好看的,类似ruba网站上的infowindow,当时上ruba网上,用firebug查看了它的js,css,挺复杂的,越看越觉得无从下手了。看google map api reference,里面对于Ginfowindow的描述很简单:

GInfoWindow has no constructor. It is created by the map and accessed by its method GMap2.getInfoWindow().

然后试着按照api上所写的扩展操作,发现这是一个很巨大的工程,还是找找有没有现成的demo之类。

到google里搜索,试了N多关键词,结果搜索出来的东东除了google maps api没有别的(先用中文搜索的自定义google 地图s 的infowindow),失望之余改用英文搜,一下子出现N多链接,貌似都还挺有帮助的,看来还是老外研究这个比较多呀,很兴奋地点开,竟然“该网页无法显示”,自定义google 地图s 的infowindow?遇到N多这样的网页,不过还是极少的网页是可以看的,终于找到了一个帖子,这个帖子讲到了一种infowindow的自定义扩展,http://drupal.org/node/247875

感觉这个人研究的挺深入,还比较好几种自定义方案的优劣点,他提到有三种,There are several plugins / extensions that customise the appearance infowindow (bubble) in a bit nicer way than what is possible with css, like extinfowindow, Elabel and Ebubble, of which the first one looks best to me.

很遗憾的是后面两种根本打不开链接,不过,很幸运的是第一个竟然还可以打开,并且正是我要找的custom infowindow,很是高兴。还是把这个链接也分享出来吧,如果它还能打开的话,对有这需求的朋友也是很有帮助的,http://gmaps-utility-library-dev.googlecode.com/svn/trunk/extinfowindow/examples/cssSkins.html

将extinfowindow.js 从这个网页中down下来后看看,发现这js写的真够复杂的,不过注释写的也够明白,真是太佩服这个人了,感觉自己和别人相比真是小菜中的小菜呀,需要继续努力!

? 换上新的样式后果然不错,效果如下:

自定义google 地图s 的infowindow

?

引用这个extendinfowindow也是相当的方便,

  GEvent.addListener(marker3, 'click', function(){                      marker3.openExtInfoWindow(              map,               "custom_info_window_red",              htmldesc,              {beakOffset: 3}            );           });        

?

注意第二个参数是infowindow对象所用的样式。

1 楼 yushiro 2010-07-21   非常有帮助,谢谢了。
之前也找过一些自定义InfoWindow的资料, 不过没啥结果。
你贴出的方案给我启发,可以解决我遇到的问题(就是把InfoWindow的Close按钮隐藏掉),
既然可以更换CSS, 那就在特定的地方, 用特定的CSS,把Close的X给display:none掉~ 2 楼 今天晴 2012-03-10   楼主,我想问一下,怎么才能把google map本身自带的InfoWindow禁用掉?

热点排行