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:控件相对于参照点的最*的垂直距离。

原文地址:https://www.cnblogs.com/wangpei/p/1626954.html