Google Map开发系列(十二)——定制GoogleBar --谷歌地图的本地搜索栏
2010-03-02 13:11
381 查看
在提到
地图上的默认控件
和
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
地图上的默认控件
和
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
相关文章推荐
- Google Map开发系列(十二)——定制GoogleBar --谷歌地图的本地搜索栏
- Google Map开发系列(十二)——定制GoogleBar --谷歌地图的本地搜索栏
- Google Map开发系列(十二)——定制GoogleBar --谷歌地图的本地搜索栏
- Google Map开发系列(八)——使用GMapOptions定制你的谷歌地图
- Google Map开发系列(八)——使用GMapOptions定制你的谷歌地图
- Google Map开发系列(八)——使用GMapOptions定制你的谷歌地图
- Google Map开发系列(八)——使用GMapOptions定制你的谷歌地图
- Google Map开发系列(六)——谷歌地图坐标系统总结
- Google Map开发系列(十一)——谷歌地图上的快捷键
- Google Map开发系列(六)——谷歌地图坐标系统总结
- Google Map开发系列(十一)——谷歌地图上的快捷键
- Google Map开发系列(六)——谷歌地图坐标定位
- Google Map开发系列(六)——谷歌地图坐标系统总结
- Google Map开发系列(十一)——谷歌地图上的快捷键
- Google Map开发系列(十一)——谷歌地图上的快捷键
- 敏捷开发“松结对编程”系列之十二:L型代码结构(质量篇之一)
- 从零开始学ios开发(十二):Table Views(中)UITableViewCell定制
- Google Map开发系列(三)——加载谷歌地图API的URL详细解读
- Google Map开发系列(二)——使用谷歌地图API应该有所了解的一些技术外背景
- Google Map开发系列(九)——GMap2可以有哪些设置项