Google Map开发系列（十二）——定制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

Google Map开发系列（十三）——使用地图API实现自定义叠加层

与地图上的控件不同，地图上的叠加层（Overlay）指的是和某个经纬度坐标绑定，能够跟随地图的缩放拖拽而相应移动的DOM原始，地图API文档里定义的GMarker、GPolyline、GInfoWindow都属于叠加层。右边地图上显示的交通信息的图标就是一个叠加层。

先看一段Hello World的代码吧：

上面的代码中，MyOverlay就是一个自定义的叠加层，需要的时候可以创建一个MyOverlay的实例，然后使用map.addOverlay()就可以在地图上加上这个叠加层了。这里的叠加层是在给定的位置（地图加载时的中心点）加上一个Hello World的文本，以后，无论你怎么拖动缩放地图，这个文本在地图上的位置会跟着地图变化。

下面详细解释一下代码：

var MyOverlay = function(latlng_) {

this.latlng = latlng_;

};

声明MyOverlay类的构造函数，创建该类的实例是需要给一个GLatLng类型的坐标对象作为参数。

MyOverlay.prototype = new GOverlay();

声明这个类继承自GOverlay

接下来的initialize、redraw、remove都是实现了在GOverlay接口中定义的抽象方法，这些方法在MyOverlay类的对象初始化、地图拖拽缩放、从地图上删除的时候都会被自动调用。

Overlay也是一个DOM元素，所以在initialize方法中需要做的就是定义这个DOM元素并且把它添加到合适的地方去。使用GMap2对象（作为参数传递进来）的getPane方法取得Overlay需要依附的图层（这个图层按照z-index的不同现在可以分为七种不同的图层，我就不列举了，需要的可以到文档里查查GMapPane这个类），也就是Overlay所要依附的DOM容器（不同于GMap2对象的DOM容器），定义好Overlay的样式和内容，然后作为子元素添加到刚才取到的图层里就可以了。

在initialize方法中需要注意的是，作为叠加层的DOM元素的position样式属性必须设置为absolute，并且需要显式的调用redraw方法，才能保证在叠加层第一次加载时的位置显示正确。

对于redraw方法，就是在地图的位置发生变动以后能够重新计算叠加层的坐标并重新设定叠加层的显示位置，关键点就是使用GMap2.fromLatLngToDivPixel()方法来取得叠加层的DOM绝对坐标，不是很理解这个坐标的话可以看看我以前总结果的地图坐标系统。

对于remove方法，地图在调用removeOverlay的时候会自动调用这个方法，把你的叠加层从地图上删除。

这里展示的只是一个添加简单文本的Overlay的例子，如果你需要添加更丰富的文本、图片，或者需要这个Overlay能够监听一些事件，比如单击、双击等等，只需要在initialize()方法里对Overlaly的DOM元素做更多的声明和控制就可以了，和你在网页中其他地方定义一个DOM元素没什么两样。

Google Map开发系列（十二）——定制GoogleBar --谷歌地图的本地搜索栏相关推荐

BizTalk开发系列(十二) Schema设计之Group与Order
更多内容请查看:BizTalk动手实验系列目录 BizTalk 开发系列开发BizTalk项目的时候会先约定各系统之间往来的消息格式. 由于BizTalk ...
【Qt编程】基于Qt的词典开发系列十二调用讲述人
我们知道,win7系统自带有讲述人,即可以机器读出当前内容,具体可以将电脑锁定,然后点击左下角的按钮即可.之前在用Matlab写扫雷游戏的时候,也曾经调用过讲述人来进行游戏的语音提示.具体的Matla ...
Google Map开发系列（六）——谷歌地图坐标定位
要在地图中定位一个点,最常见的就是使用一个地理坐标来定位.但是,谷歌地图 API 还提供了不同于地理坐标的多套坐标系统,方便我们在需要的时候使用不同的坐标来定位在地图上显示的信息.我在右边的地图中演示 ...
Android 10.0 SystemUI下拉状态栏UI定制化开发系列(十二)
目录 1.概述 2.核心代码 3.核心代码部分分析 3.1 NotificationStackScrollLayout.java代码分析 3.2接下来分析Activat
Web 前端开发精华文章推荐（jQuery、HTML5、CSS3）【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注前端开发技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
Alamofire源码解读系列(十二)之请求(Request)
本篇是Alamofire中的请求抽象层的讲解前言在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...
Android Google Map 开发指南（一）解决官方demo显示空白只展示google logo问题
这两天一直在做google map接入前的准备工作特此在这里将自己在加载官方demo时出现的问题以及详细的接入步骤进行记录,已免后者踩坑注:项目实际运行时不要使用虚拟机因为电脑ip和虚拟机ip不 ...
Google Map开发之实战
视频课:[免费]跨平台APP JQuery Mobile开发-1-初探移动开发-张晨光的在线视频教程-CSDN程序员研修院学习内容 Google Map服务简介获取Google Map API K ...
Google Map 开发笔记——基础篇(Javascript )
Google Map 开发笔记--基础篇说明: 一.使用入门: 1.在您需要显示地图的 html 页面嵌入这段 script 2.地图 DOM 元素 3.初始化地图二.地图画点.线.面 1.标记( ...

Google Map开发系列（十二）——定制GoogleBar --谷歌地图的本地搜索栏

Google Map开发系列（十二）——定制GoogleBar --谷歌地图的本地搜索栏相关推荐

最新文章

热门文章