2008年11月25日星期二

使用GMapOptions定制你的谷歌地图

  之前我曾经解释过创建一个地图的详细步骤,但是,真正创建地图的核心步骤也就两行代码:
    var map = new GMap2(document.getElementById("mapContainer"));
    map.setCenter(new GLatLng(33.0, 106.0),  3);
   有这两行代码,你就可以在你的网页上展现你的谷歌地图了。但是,这个是最简单的地图,如果你想要对这个地图做一些小小的变动,更符合你的胃口,可以使用GMapOptions来尝试定制地图。
   简单的说,GMapOptions是你在new一个GMap2对象的时候,可以直接使用对象变量的形式作为可选参数传递给GMap2的构造函数,GMapOptions自己没有构造函数(地图API中类构造函数的可选参数多用这种形式来定义),比如:
   var options = {size:GSize(400, 300), backgroundColor:"#FF0000"};
   var map = new GMap2(document.getElementById("mapContainer"), options);
   这里options就是一个GMapOptions,size、backgroundColor就是他的选项。
   在GMapOptions中,我们可以定义以下这些属性来指定地图的某些特性:

   1)size
   默认情况下,你创建的地图大小就是你给定的地图容器的大小,所以,通常情况下,你需要显式的声明你的地图容器的width和height属性,否则,地图是不能正常显示的。但是,有了size这个可选属性后,你就多了一个选择了。你可以在创建地图的时候直接通过size这个属性指定地图的大小,而不需要听命于地图容器了,即使这个地图容器已经显示的定义了width和height的大小。当然,size属性对应的值是一个GSize类型的数据,比如,如果给定options={size:GSize(400, 300)},那么,你所创建的地图大小就是400×300的一个矩形块,而和你指定的容器大小无关,但是地图的左上角和地图容器的左上角还是重合的。

   2)mapTypes
   创建地图后,默认显示的地图类型是普通地图,如果要加上可以选择的卫星地图、地形地图等等其他类型的地图,可以使用GMap2.setMapType()方法,但这样往往会罗列一堆的setMapType。GMapOptions提供了mapTypes这个可选项,通过一个数组就可以给地图加上多种支持类型,比如使用{mapTypes:[G_NORMAL_MAP,G_SATELLITE_MAP,G_PHYSICAL_MAP]},你的地图就拥有三种普通、卫星、地形三种类型了。mapTypes数组中的第一项是地图加载的默认类型,所以,如果你想默认加载卫星地图,把G_SATELLITE_MAP移到数组的第一项就可以了。

  3)draggableCursor、draggingCursor
  这两个选项是用来定义地图上你的光标类型,我把它们放在一起介绍不等于它们必须一起使用,你可以单独使用任何一个。其中,draggableCursor是地图可拖拽状态(默认就是可拖拽的)下的光标,draggingCursor是拖拽地图时的光标,对应的值和你在JavaScript里面设置其他的光标时使用的值一样,比如,{draggableCursor:"crosshair",draggingCursor:"move"}。当然,你也可以使用url形式加上你自己的图标,看你发挥了!

  4)backgroundColor
  在地图图块的图片还没有传送完成之前,地图的显示区域默认会使用灰色填充,这个就是backgroundColor可以发挥作用的地方了,你可以把灰色换成其他任何符合W3C标准的颜色,比如{backgroundColor:"#FF0000"},不过估计没人会喜欢用这种大红做背景的:)。可惜的是这里只能定义color,要是这个选项是background而不是backgroundColor,千方百计想打个Logo的兄弟就真能找着好地方了。

  5)googleBarOptions
  这个和你在地图上通过GMap2.enableGoogleBar()时有关系,指定你添加GoogleBar时的一些默认属性,在以后说GoogleBar的时候再来专门说吧,定制性还是很强的。