zoukankan      html  css  js  c++  java
  • Google Map API使用详解(十六)——使用GMapOptions定制你的Google Map

    之前我曾经解释过创建一个地图的详细步骤,但是,真正创建地图的核心步骤也就两行代码:

    var map = new GMap2(document.getElementById("mapContainer"));

    map.setCenter(new GLatLng(39.970981,116.314108), 16);

    有这两行代码,你就可以在你的网页上展现你的谷歌地图了。但是,这个是最简单的地图,如果你想要对这个地图做一些小小的变动,更符合你的胃口,可以使用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) draggableCursordraggingCursor

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

    4) backgroundColor

    在地图图块的图片还没有传送完成之前,地图的显示区域默认会使用灰色填充,这个就是backgroundColor可以发挥作用的地方了,你可以把灰色换成其他任何符合W3C标准的颜色,比如{backgroundColor:"#FF0000"}。

    5) googleBarOptions

    这个和你在地图上通过GMap2.enableGoogleBar()时有关系,指定你添加GoogleBar时的一些默认属性,定制性还是很强的。

  • 相关阅读:
    MARTIN FOWLER谈敏捷开发
    精益创业
    DEVOPS基础
    测试驱动开发
    持续集成(CONTINUOUS INTEGRATION)
    极限编程
    回归测试
    敏捷开发十二原则
    敏捷开发宣言
    敏捷开发简史
  • 原文地址:https://www.cnblogs.com/greywolf/p/2619626.html
Copyright © 2011-2022 走看看