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对象的详细信息位于叠加层部分中。

 

    (待续)

你可能感兴趣的:(google map)