Google Map API使用详解(四)——Google Map基本常识(中)
6、构造函数说明
GMap2(container, opts) 在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap2Options 类型的可选参数。请注意因为 JavaScript 是松散类型的语言,我们可以不填写构造函数的任何可选参数,此处未这样做。
7、初始化地图
map.setCenter(new GLatLng(39.970981,116.314108), 16);
通过 GMap2 构造函数创建地图后,我们需要再做一件事:将其初始化。初始化通过地图的 setCenter() 方法完成。setCenter() 方法要求有 GLatLng 坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。
8、加载地图
<body onload="initialize()" onunload="GUnload()">
当 HTML 页面显示时,文档对象模型 (DOM) 即会扩展,接收其他外部图像和脚本并将其合并到 document 对象中。为确保我们的地图仅放置在完全加载后的页面上,我们仅在 HTML 页面的 <body> 元素收到 onload 事件后才执行构造 GMap2 对象的函数。这样做可以避免出现不可预期的行为,并使我们可以对地图绘制的方式和时间进行更多控制。
onload 属性是事件处理程序的示例。Google 地图 API 还提供了大量事件可以用来“监听”状态变化(请参阅地图事件和事件监听器以了解更多信息)。而GUnload() 函数是用来防止内存泄漏的实用工具函数。
9、经度和纬度
既然现在已经有地图了,我们还需要一种方法来引用地图上的位置。在 Google 地图 API 中,GLatLng 对象提供了此类机制。可以构造一个 GLatLng 对象,按照制图学的惯例以 {纬度, 经度} 的顺序传递参数:
var myGeographicCoordinates = new GLatLng(myLatitude, myLongitude)
注意:将“地址”转变为地理点的过程称为“地址解析”,将在“Google 地图 API 服务”部分中详细讨论。
就像它可用于轻松地引用地理点一样,它也可用于定义对象的地理边界。例如,地图在称为视口的窗口内显示整个世界的当前“窗口”。此视口可以通过四个角上的矩形点来定义。GLatLngBounds 对象提供了这个功能,通过使用分别表示边界框的西南角和东北角的两个 GLatLng 对象定义一个矩形区域来实现。
GLatLng 对象在 Google 地图 API 中用途广泛。例如,GMarker 对象在其构造函数中具有 GLatLng,并在地图上的指定地理位置放置标记“叠加层(Overlay)”。
下面的示例(详见MyTest2.html)使用 getBounds() 返回当前视口,然后在地图上的这些边界内随机放置 10 个标记:
function initialize() {
var map = new GMap2(document.getElementById("mapContainer"));
map.setCenter(new GLatLng(39.970981,116.314108), 16);
// Add 10 markers to the map at random locations
var bounds = map.getBounds();
var southWest = bounds.getSouthWest();
var northEast = bounds.getNorthEast();
var lngSpan = northEast.lng() - southWest.lng();
var latSpan = northEast.lat() - southWest.lat();
for (var i = 0; i < 10; i++) {
var point = new GLatLng(southWest.lat() + latSpan * Math.random(),
southWest.lng() + lngSpan * Math.random());
map.addOverlay(new GMarker(point));
}
}
注意:有关GMarker对象的详细信息位于叠加层部分中。
(待续)