Google Map开发系列（十）——给你的地图加上API提供的默认控件

地图上的控件一般是指悬浮在地图上、不随地图移动的图片、按钮等等 DOM 元素，可以用来控制地图、帮助用户和地图交互、显示地图的特定信息和状态。
在谷歌地图主页上，有可以控制地图缩放的控件、有切换地图类型的控件、有显示缩略图的控件等等，这些控件在地图 API 里默认也都是提供的，所以，你可以在你的地图上加上这些控件，并且可以根据你的需要随意调整地图控件的位置、改变控件的外观，就像我在右边的地图上把缩放控件移到右上角而不是默认的左上角、并且使用了一个微型化的外观。下面先看看可以在地图上添加哪些控件吧。

地图 API 中默认控件的种类
1 、地图缩放控件
   缩放控件是可以控制地图移动和放大级别的，默认有三种：
   1 ） 全功能控件 GLargeMapControl
        有方向按钮、恢复按钮、缩放按钮和缩放滑块
   2 ） 微型化控件 GSmallMapControl
       把全功能控件去掉恢复按钮和缩放滑块后的控件
   3 ） 微型缩放控件 GSmallZoomControl
   只有放大 / 缩小两个按钮
   下面从左到右依次是 GLargeMapControl ， GSmallMapControl ， GSmallZoomControl 这三个控件，选用哪一个就看你的空间有多大了。不过，我认为通过 GMap2 提供的设置项允许用户使用滚轮和双击缩放地图比使用一个大大的缩放控件更方便。
    

     

    

    这几天谷歌地图主页刚刚换了新的缩放控件，有点类似于谷歌地球上哪个，不过使用 API 实现的还没有变，仍然是上面显示的这个样子。

2 、地图类型选择控件
    地图类型选择控件是用来选定所显示地图的类型的，比如普通地图、卫星地图、地形地图等等，也有三种，唉，突然想起孔乙己 :)
    1 ）按钮式标准控件 GMapTypeControl
    每种地图类型对应一个按钮，点击不同的按钮切换地图类型，比如
    

    2 ）菜单式控件 GMenuMapTypeControl
    所有的地图类型使用一个下拉菜单来显示，选择菜单中的不同项来切换地图类型，比如
    

    3 ）阶层式标准控件 GHierarchicalMapTypeControl
    类似标准的按钮控件，不过在某些按钮下可以选择在该类型地图下的嵌套内容，比如卫星地图中还可以选择是否使用标签、即是否使用混合类型 (Hybrid) 的地图，如下：
    

    这个控件目前在中文地图上没有什么作用，因为中文地图还不支持 Hybrid 类型的地图，也不能在地图上显示 Panoramio 的图片和 Wikipedia 的内容。
3 、缩略图控件 GOverviewMapControl
    在地图上显示一个比现有地图范围更大、但是尺寸要小得多的缩略图，默认位置在右下角，在该控件的右下角有一个箭头，点击可以收放这个控件，需要移动地图时你也可以直接拖动缩略图里的那个蓝框，会比你直接拖动地图要快一些。
    

4 、比例尺控件 GScaleControl
    显示当前地图的比例尺，所以上面的数值会随地图的缩放变化，这个控件不是特别引人注目
    

5 、本地搜索控件 GoogleBar
    上一篇介绍 GMap2 设置项的文章里把这个包括了进去，还是放在这里比较合适，是什么我就不多说了，看图
    

谷歌地图上常用的默认控件基本就这些了，你在我右边的地图里基本都能找到这些控件，想把这些控件加到你的地图上也不难，接着来看。

向地图上添加控件的方法
上面我已经给出了每个控件对应的类名，添加的步骤（以添加右边地图中的微型缩放控件为例）：
1 、重置控件的位置，如果你使用控件的默认位置，这一步就不需要了。一般情况下也确实不需要，只有在你的地图空间狭小，控件摆布不开的时候才会有，右边的地图就是这种情况。
    GSmallMapControl.prototype.getDefaultPosition = function(){
        return new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10, 30));
    }
    注意G_ANCHOR_TOP_RIGHT 和new GSize(10, 30) 这两个参数，这个其实就决定了右边地图里微型缩放控件的位置，位于右上角（TOP_RIGHT ），距地图右边距10px ，上边距30px 。
2 、创建控件对象
    var mapControl = new GSmallMapControl();
3 、调用map.addControl() 方法添加控件
    map.addControl(mapControl);

怎么样，还没过瘾？API 里提供的默认控件基本就这些了，如果你还想加上你自己设置的控件，比如右边地图上的状态控制，那就看看我之前介绍的自定义地图控件的方法 吧。

到这里为止，通过 指定 GMapOptions 、 设定地图设置项 、添加默认控件，我们可以在不需要添加任何叠加层、信息窗口、事件侦听的情况下，就可以创建一个内容比较丰富的地图了。当然，等我介绍完本地搜索控件的定制方法，我们的地图内容会更丰富。