第八部分Google Maps API开发

第八部分Google Maps API开发

本部分来源于：http://www.codechina.org/doc/google/gmapapi/

实验目的：

 熟悉Google Maps API函数  掌握Google Maps API的应用方法

 开发基于Google Maps API的武汉理工大学地图

第一节 一个简单示例

实验目标：申请API key，并实验一个简单示例。 实验步骤：

一）Google Maps JavaScript API允许您把Google地图嵌入到您自己的网页内。要使用这个API，首先您需要申请一个API key，然后按照下面的指南操作。

二）Google Maps上的Hello World

学习这个API最简单的方法就是看一个简单的例子。下面的网页显示一个500x300的地图，中心位于California，Palo Alto：

下面例子里面的地址(http://maps.google.com/maps?file=api&v=2)是在您的页面放置Google地图需要的所有的代码的JavaScript文件。您的页面必须包含指向这个地址的script标记，并加上您的API Key。如果您的API Key是\"abcdefg\"，那么您的script标记看起来应该是这样的：

描绘地图的类是GMap2。这个类在页面上显示一个地图。您可以创建任意多个该类的实例（一个实例就是页面上的一个地图）。创建了地图实例之后，就可以指定一个页面元素(通常是div元素)来包含它。除非您明确的指定地图的尺寸，否则地图大小会取决于容器的尺寸。

第二节 地图范例

实验目标：熟悉地图操作相关的API。 实验步骤：

下面的例子仅会显示主体相关的JavaScript代码，而不是完整的HTML文件。您可以把JavaScript代码嵌入到前面的骨架HTML文件，或者您可以直接下载每个例子下面的链接所引用的HTML文件。 一）基础

下面的例子创建一个地图并定位到Palo Alto, California。

var map = new GMap2(document.getElementById(\"map\")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); 第八部分 Google Maps API开发

实验内容：将地图定位到武汉理工大学。 二）在地图上添加控件

您可以用addControl方法在地图上添加控件。在这个例子里，我们加入GSmallMapControl和GMapTypeControl控件，这样我们分别可以移动/缩放地图以及在地图和卫星模式之间切换。

var map = new GMap2(document.getElementById(\"map\")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

三）事件监听器

要注册一个事件监听器需要调用GEvent.addListener方法。把一个地图，一个需要监听的事件，一个事件发生时需要调用的函数传给GEvent.addListener方法。在下面的例子里，在我们拖动地图后，显示地图中心的经纬度。

var map = new GMap2(document.getElementById(\"map\")); GEvent.addListener(map, \"moveend\ var center = map.getCenter(); document.getElementById(\"message\").innerHTML = center.toString(); }); map.setCenter(new GLatLng(37.4419, -122.1419), 13);

四）打开信息窗口

要创建一个信息窗口，调用openInfoWindow方法，传递给它一个位置和一个用来显示的DOM元素。下面的例子在地图中心显示一个包含\"Hello, world\"信息的窗口。

var map = new GMap2(document.getElementById(\"map\")); map.setCenter(new GLatLng(37.4419, -122.1419), 13); map.openInfoWindow(map.getCenter(), document.createTextNode(\"Hello, world\"));

五）点击事件处理

要在用户点击地图的时候触发一个动作，就需要在您的GMap2实例上注册一个\"click\"事件的监听器。当事件被触发的时候，事件处理句柄将收到两个参数：被点击的标记(如果有)，被点击点的GLatLng(经纬度)。如果没有标记被点击，那么第一个参数为null。

第八部分 Google Maps API开发

注意：标记是唯一支持\"click\"事件的内建覆盖对象。其他类型的覆盖对象，如GPolyline是不能被点击的。

在下面的例子里，当访客点击在地图上一个没有标记的点上时，我们在这个点上创建一个标记。当访客点击在一个标记上的时候，我们把它删除。

var map = new GMap2(document.getElementById(\"map\")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); GEvent.addListener(map, \"click\ if (marker) { map.removeOverlay(marker); } else { map.addOverlay(new GMarker(point)); } });

六）编码折线

Google地图中的GPolyline对象表示的是一系列的点，简单易用但不够简洁。表示长且复杂的折线需要大量的内存，而且在描绘的时候会花费大量的时间。而且未经编码的折线会在Google地图的每个缩放级别中可见。

Google Maps API也允许你用编码折线来表现路径。编码折线用一个压缩格式的ASCII字符串来表现一系列的点。编码折线还允许你指定线段的可见缩放级别；这样你就可以指定折线在当前的缩放级别下细节如何表现。虽然用起来更加复杂，但是编码折线可以让你的地图描绘效率更高。 例如，有三个点的GPolyline对象通常表现为:

var polyline = new GPolyline([ new GLatLng(37.4419, -122.1419), new GLatLng(37.4519, -122.1519), new GLatLng( 37.4619, -122.1819) ], \"#FF0000\map.addOverlay(polyline); 实验内容：将武汉理工大学的轮廓表示在Googel Maps上。 七）创建图标

// Create our \"tiny\" marker icon var icon = new GIcon(); 第八部分 Google Maps API开发

icon.image = \"http://labs.google.com/ridefinder/images/mm_20_red.png\"; icon.shadow = \"http://labs.google.com/ridefinder/images/mm_20_shadow.png\"; icon.iconSize = new GSize(12, 20); icon.shadowSize = new GSize(22, 20); icon.iconAnchor = new GPoint(6, 20); icon.infoWindowAnchor = new GPoint(5, 1);

实验内容：将武汉理工大学校徽作为图标。

第三节 使用XML和异步远程调用（AJAX）

实验目标：熟悉AJAX和使用XML。 实验步骤： 一）构建data.xml

二）使用了一个外部的XML数据文件

在这里例子里，我们下载一个静态文件(\"data.xml\")，我们用GDownloadUrl方法下载这个包含一个经纬度列表的XML文件。当下载完成，我们用GXml类来解析，并为XML文档中的每一个点建立一个标记。

var map = new GMap2(document.getElementById(\"map\")); map.addControl(new GSmallMapControl()); map.addControl(new GMapTypeControl()); map.setCenter(new GLatLng(37.4419, -122.1419), 13); // Download the data in data.xml and load it on the map. The format we // expect is: // // // 第八部分 Google Maps API开发

// GDownloadUrl(\"data.xml\ var xml = GXml.parse(data); var markers = xml.documentElement.getElementsByTagName(\"marker\"); for (var i = 0; i < markers.length; i++) { var point = new GLatLng(parseFloat(markers[i].getAttribute(\"lat\")), parseFloat(markers[i].getAttribute(\"lng\"))); map.addOverlay(new GMarker(point)); } });

第四节 地理译码

实验目标：将地名转换为经纬度。 实验步骤：

可以直接发HTTP请求的方式来访问Maps API的地理译码器，或者可以用GClientGeocoder对象在JavaScript下发送请求。这样您可以从您的服务器进行地理译码调用或者让用户的浏览器进行这个操作。 一）JavaScript下使用地理译码

在JavaScript下您可以用GClientGeocoder对象来访问地理译码器。getLatLng方法可以用来把地址转换为GLatLng(经纬度)。因为地理译码需要发送请求到Google的服务器，所以这可能会花点时间。为了避免您的脚本一直等待，您需要指定一个函数在回应后触发。在这个例子里，我们把一个地址地理译码，然后在这个点上加一个标记，然后打开一个信息窗口显示地址。

var map = new GMap2(document.getElementById(\"map\")); var geocoder = new GClientGeocoder(); function showAddress(address) { geocoder.getLatLng( address, function(point) { if (!point) { alert(address + \" not found\"); } else { map.setCenter(point, 13); var marker = new GMarker(point); 第八部分 Google Maps API开发

map.addOverlay(marker); marker.openInfoWindowHtml(address); } } ); }

实验内容：获得武汉理工大学的地理译码。 二）HTTP请求方式

想直接让服务器端脚本访问地理译码器，可以发请求到http://maps.google.com/maps/geo?，把如下参数加在地址里面： q -- 你想地理译码的地址。 key -- 你的API key。

output -- 输出格式。选项是xml，kml，csv或者json。 在这个例子里，我们请求google总部的地理坐标。

http://maps.google.com/maps/geo?q=1600+Amphitheatre+Parkway,+Mountain+View,+CA&output=xml&key=abcdefg

实验内容：获得武汉理工大学的地理译码。

后记