2008年12月5日星期五

定制GoogleBar --谷歌地图的本地搜索栏

在提到地图上的默认控件GMap2的设置项的时候,我都提过谷歌地图的本地搜索栏这个控件,要在地图上加上这个控件很简单,不需要调用GMap2.addControl(),只需要一句话:
  map.enableGoogleBar();
这样就可以在地图的左下角加上这个搜索栏了,并且替换掉了原来的谷歌Logo的图片。
目前用这个搜索栏可以搜索两种类型的数据:
  1、地名;
  2、谷歌提供的商业数据,比如“餐馆”,默认是在当前显示的地图范围内搜索;
具体的搜索结果是上面的哪种类型由你输入的关键字决定,没有什么特别的方法。搜索返回结果后会自动在地图上加上所有结果的标记,同时会用DOM形式显示这个搜索结果,至于DOM会是什么样的形式展现,接着看就知道了。

定制这个搜索栏对应的类是GGoogleBarOptions,没有构造函数,对应一个对象变量,使用方式类似于使用GMapOptions定制谷歌地图,不过GGoogleBarOptions是作为GMapOptions里的一项在创建GMap2对象的时候使用。如果你了解过Google AJAX Search API的话,你对下面这些设置项会很熟悉,因为,这个本地搜索栏就是对AJAX Search中的GLocalSearchControl的一个封装。
先看几个基本的设置项:
  1、 showOnLoad
  这个是boolean类型的项,决定加载完成后搜索栏的显示状态,默认是false,意思是搜索栏是闭合的,不显示输入框,如果你想提醒用户这里有个输入框可以搜索,可以把这一项设成true,即{showOnLoad:true};
  2、linkTarget
  简单的说,这个就是搜索结果里每一条记录对应link的target属性值,四个可选值,默认是等价于target="blank_"的G_GOOGLEBAR_LINK_TARGET,其他还有parent, self, top这几项,准确的参数我就不列了,开发文档里有。不过这一项基本用不着,不用设置;
  3、resultList
  用来指定搜索结果的DOM显示样式,默认是用列表的方式显示(G_GOOGLEBAR_RESULT_LIST_INLINE),还有一种是添加一对方向箭头让你逐个翻阅,就像右边的地图里显示的那样。如果你的地图空间比较小的话可以用后一种,设定{resultList:G_GOOGLEBAR_RESULT_LIST_SUPPRESS};
  4、suppressInitialResultSelection
  这个用来指定搜索完成后是否自动选中第一个搜索结果并且打开它的信息窗口,默认是false,就是打开第一条记录的信息窗口,不需要的话就指定{suppressInitialResultSelection:true};
  5、suppressZoomToBounds
  按照文档的说法,这个用来设定搜索完成后是否需要地图自动缩放移到来完整显示所有的标记点,默认是false,不缩放的,不过我在试用时发现不管搜索结果如何,地图都不会缩放。所以,暂时忽略这一项。
  6、searchFormHint
  这个在文档里没有列出来,但是也可以使用,用来设定输入框处于非激活状态时的提示语,默认的是“搜索地图”,你也可以设成你自己的提示语,比如:{searchFormHint:"hi,在这里可以直接搜索地图"}

再来看几个用来设定搜索操作时的回调函数,类似于事件监听,这几个可以做很多文章:
  1、onIdleCallback
  这个在搜索结果被清除的时候调用,也就是在你点击搜索结果上的“清除结果”这个链接后,是不是在本次搜索结果返回并且自动清除上一次搜索结果后调用我还不确定,看开发文档似乎有这个意思。
  2、onSearchCompleteCallback
  在已经得到搜索结果但是还没有添加到地图上的时候调用,会传递一个GlocalSearch对象作为参数,GlocalSearch是Google AJAX Search API里定义的一个类,想了解的先去看文档吧,我就不多说了。
  3、onGenerateMarkerHtmlCallback
  在打开一条搜索记录的信息窗口前会被调用,传入marker, html, result三个参数,分别对应这条记录在地图上的标记(GMarker)、填充信息窗口的html字符串、对应的搜索结果(GlocalResult)。这里定义的回调方法必须返回一个dom对象,用在打开的信息窗口中。所以,通过这一项的设置,你就可以更改搜索结果的信息窗口里的默认内容了。右边的地图里就把默认的信息窗口内容换了,去掉了“从这里来”、“到这里去”的链接,加上了一个静态地图,
  4、onMarkersSetCallback
  这个在所有的结果标记都已经创建但还没有添加到地图之前调用,传入的参数是一个搜索结果的数组results,数组里的每一项对应一条搜索记录,包括latLng, marker, result,对应结果的坐标GLatLng、标记GMarker、结果记录GlocalResult。这个时候结果的显示列表已经创建完成了,所以,如果你想修改这个现实结果不妨试试这个设置项。
  
追加一些说明,上面说到的GlocalResult也是在Google AJAX Search API里定义的一个类,没有构造函数,当作对象变量使用,需要了解可以看看文档,这里列一下这个类的一些主要属性:
.title, .titleNoFormatting, .lat, .lng, .streetAddress, .city, .country, .phoneNumbers[], .staticMapUrl