Google Map开发系列(八)——使用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 的时候再来专门说吧,定制性还是很强的。

来源:http://blog.csdn.net/jiali765/archive/2010/03/02/5338486.aspx

加支付宝好友偷能量挖...


评论(0)网络
阅读(125)喜欢(0)Google Maps开发