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&v=2&key=ABQIAAAAkyv6qH8t8ZsRsmLWaC41OhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxTKqz76siagMXq4B92PEBHnHEQhVA" type="text/javascript"></script>
这里的key的值应该替换为自己申请到的key。
导入成功后,需要给GoogleMaps提供一个显示的容器。该容器一定要有ID的属性可供查找。一般来说,该容器是DIV。可参考Google的示例代码。
<div id="map" style="width: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:控件相对于参照点的最近的垂直距离。