zoukankan      html  css  js  c++  java
  • Google Maps API 初级1

    转自:http://hi.baidu.com/xfm_zhr/blog/item/dd4211ddd5fa20de8c10294f.html

    1.       使用GoogleMapsAPI之前,首先要申请一个GoogleMapsAPI的一个KEY。KEY是免费的。申请地址:http://code.google.com/apis/maps/index.html。申请到KEY以后,Google会给出一个测试页的代码。复制代码并按照申请的地址打开,能看到Google地图,说明可以正确的使用GoogleMapsAPI进行二次开发了。

    2.       要使用GoogleMapsAPI,首先要导入相应的库文件。可参考Google提供的实例代码。

    <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAkyv6qH8t8ZsRsmLWaC41OhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTKqz76siagMXq4B92PEBHnHEQhVA" type="text/javascript"></script>

    这里的key的值应该替换为自己申请到的key。

           导入成功后,需要给GoogleMaps提供一个显示的容器。该容器一定要有ID的属性可供查找。一般来说,该容器是DIV。可参考Google的示例代码。

    <div id="map" style="500px;height:300px"></div>

    3.       导入了库文件以及拥有了显示GoogleMaps的容器,就可以进行API的编程了。首先,是GoogleMaps的加载与卸载。GoogleMaps的加载可在页面的任何时间加载。一般可在页面加载的时间同时加载GoogleMaps,即页面onload事件中加载GoogleMaps。加载代码参加Google的示例代码。

    <script type="text/javascript">

        //<![CDATA[

        function load() {

          if (GBrowserIsCompatible()) {

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

            map.setCenter(new GLatLng(37.4419, -122.1419), 13);

          }

        }

        //]]>

    </script>

    ……

    <body onload="load()" onunload="GUnload()">

    关于GoogleMaps的卸载问题。因为GoogleMaps生成大量的对象,为了防止内存泄露而造成系统崩溃,建议在页面关闭时,执行Gunload函数,该函数用于销毁对象释放内存。

    4.       关于GMap2对象。

    GMap2对象

    用于实现创建和控制地图等功能。创建语法:

    New GMap2 (container , opts)

    Container:GoogleMaps的容器。HTML DOM 类的对象,可用document.getElementById()方法获取。

    Opts :可省略。用于控制更复杂的地图特性。

    GMap2对象的方法

    setCenter(point, zoomlevel , opts)

    设置地图中心的坐标。GoogleMaps只有调用了该函数才能正确的完成初始化操作,即必须调用改函数才能显示地图。显示地图为普通地图。

    Point:要设置的地图的中心,一个GlatLng对象(创建方式为 new GlatLng(纬度,经度)).

    Zoomlevel : 0~17的整数,设定缩放级别。可省略。

    Opts:用于设置高级属性,可省略。

    panTo(point)

    将地图中心*滑移动到新的坐标。

    Point:要设置的地图的中心,一个GlatLng对象(创建方式为 new GlatLng(纬度,经度)).

    panBy()

    将地图*滑的移动相对的一段距离。

    setMapType(type)

    设置地图类型。

    Type:三种内置地图类型(G_NORMAL_MAP普通地图、G_SATELLITE_MAP卫星地图、G_HYBRID_MAP混合地图)或自定义地图类型。

    addControl(Gcontrol, position)

    添加控件。

    Gcontrol:Gcontol控件的一个可实例化的类对象。

    Position:定义控件在地图上的位置,GcontrolPosition对象(new GcontrolPosition(anchor, offset))。可省略。省略后,控件会放在默认的位置上。

    添加控件完整示例代码:

    map.addControl( new GSmallMapControl(),

                    new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10)));

    5.       GControl控件

    Gcontrol控件是对地图进行控制的一组对象的总成。包括:GsmallMapControl精简地图控件,GlargeMapContol完整地图控件,GsmallZoomControl精简缩放控件,GscaleControl比例尺控件,GmapTypeControl地图类型控件。

    Gcontrol控件本身是一个抽象类,仅用于提供接口。真正的可实例化的类是实现了这个接口的具有具体功能的类,例如上面提到的地图类型控件。

    声明语法:

    New Gcontol名称()

    6.       GControlPosition对象

    描述控件位置。声明语法:

    New GControlPosition(anchor,offset);

    Anchor:控件位置的参照点,枚举类型(G_ANCHOR_TOP_LEFT, G_ANCHOR_TOP_RIGHT, G_ANCHOR_BOTTOM_LEFT, G_ANCHOR_BOTTOM_RIGHT)。

    Offset: GSize()对象。描述距离,像素为单位。

    7.       GSize(x, y)对象

    描述距离,像素为单位。

    X:控件相对于参照点的最*的水*距离。

    Y:控件相对于参照点的最*的垂直距离。

  • 相关阅读:
    ubuntu apt 主要命令及参数
    加速度计
    window下Opengl与vs2012环境配置
    java文本输入输出小结
    markdown + 七牛云,让写文更容易
    SpringBoot系列:Spring Boot使用模板引擎Thymeleaf
    SpringBoot系列:Spring Boot集成Spring Cache,使用EhCache
    SpringBoot系列:Spring Boot集成Spring Cache
    SpringBoot系列:Spring Boot集成Spring Cache,使用RedisCache
    SpringBoot系列:Spring Boot使用模板引擎JSP
  • 原文地址:https://www.cnblogs.com/wangpei/p/1626954.html
Copyright © 2011-2022 走看看