所产生的表单如图 4 所示：
图 4. 编辑 Airport 表单 单击 Update 按钮将表单值发送到 update 闭包。将服务调用和 hashmap 合并添加到默认代码，如清单 10 所示：
清单 10. 修改 update 闭包1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| def update = {
def airport = Airport.get( params.id )
if(airport) {
def results = geocoderService.geocodeAirport(params.iata)
airport.properties = params + results
if(!airport.hasErrors() && airport.save()) {
flash.message = "Airport ${params.id} updated"
redirect(action:show,id:airport.id)
}
else {
render(view:'edit',model:[airport:airport])
}
}
else {
flash.message = "Airport not found with id ${params.id}"
redirect(action:edit,id:params.id)
}
}
|
到目前为止，您已经像 Google Map 一样无缝地将地理编码集成到您的应用程序里。花点时间想一想在应用程序中捕获地址的所有位置 — 顾客、雇员、远程办公室、仓库和零售点等等。通过简单地添加几个字段以存储纬度/经度坐标和加入一个地理编码服务，就能够设置一些简易的地图来显示对象 — 这正是我下一步的工作。
Google Map许多人都知道为了易于使用，Google Map 针对 Web 地图绘制设置了标准。但很少人知道到这个标准也适用于将 Google Map 嵌入到您自己的 Web 页面中。为数据点获取纬度/经度坐标是这个应用中最困难的部分，但我们已经解决了这个问题。
要将 Google Map 嵌入到 Grails 应用程序中，首先要做的是获得一个免费的 API 密匙。注册页面详细说明了使用条款。实际上，只要您的应用程序是免费的，Google 也将免费为您提供 API。这意味着您不能对 Google Map 应用程序进行密码保护、收取访问费用或把它托管在防火墙后面（做个广告：由我撰写的 GIS for Web Developers 一书将逐步指导您使用免费数据和开发源码软件构建类似于 Google Map 的应用程序；参见 。这使您不再受到 Google 的 API 使用限制的约束）。
API 密匙通常绑定到一个特定的 URL 和目录。在表单中输入 http://localhost:9090/trip 并单击 Generate API Key 按钮。确认页面将显示刚生成的 API 密匙、与密匙相关联的 URL 和一个 “get you started on your way to mapping glory” 的示例 Web 页面。
为了将这个示例页面并入到 Grails 应用程序，需要在 grails-app/views/airport 目录中创建一个名为 map.gsp 的文件。从 Google 将示例页面复制到 map.gsp。 清单 11 展示了 map.gsp 的内容：
清单 11. 一个简单的 Google Map Web 页面1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example</title>
<script src="//maps.google.com/maps?file=api&v=2&key=ABCDE"
type="text/javascript"></script>
<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>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>
</html>
|
注意，API 密匙嵌入在页面顶部的脚本 URL 里。在 load 方法中，您正在实例化一个新的 GMap2 对象。这就是出现在 <div /> 里的地图，同时 map 的 ID 出现在页面的底端。如果想让地图变大些，可以在层叠样式表（Cascading Style Sheets，CSS）的 style 属性中调整地图的宽度和高度。目前，这个地图以加利福尼亚州的帕洛阿图市为中心，缩放倍数为 13 级（0 级是最小的。级别越大越接近街道级别的视图）。您可以快速地调整这些值。同时，将一个空 map 闭包添加到 AirlineController，如清单 12 所示：
清单 12. 添加 map 闭包1
2
3
4
5
| class AirportController {
def map = {}
...
}
|
现在，浏览 http://localhost:9090/trip/airport/map，您将看到已嵌入的 Google Map，如图 5 所示：
图 5. 简单的 Google Map 现在先回到 map.gsp 并调整值，如清单 13 所示：
清单 13. 调整基本的地图1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <script type="text/javascript">
var usCenterPoint = new GLatLng(39.833333, -98.583333)
var usZoom = 4
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"))
map.setCenter(usCenterPoint, usZoom)
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
}
}
</script>
</head>
<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 800px; height: 400px"></div>
</body>
|
要查看整个美国，将尺寸设置为 800 x 400 像素是比较好的。清单 13 调整了中心点和缩放级别，使您能够看到完整的地图。您还可以添加许多不同的地图控制。清单 13 中的 GLargeMapControl 和 GMapTypeControl 分别在地图左边和右上角提供了常用的控制。在您调试时不断点击浏览器的 Refresh 按钮，查看修改后的效果。图 6 反映了对清单 13 所做的调整：
图 6. 调整后的地图 |
