现在基本的地图已经做好， 接下来就可以添加标记了 — 为每个机场添加图钉。在将这一过程自动化之前，我在清单 14 中手工添加了一些简单的标记：
清单 14. 将标记添加到地图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());
var marker = new GMarker(new GLatLng(39.8583188, -104.6674674))
marker.bindInfoWindowHtml("DEN<br/>Denver International Airport")
map.addOverlay(marker)
}
}
</script>
|
GMarker 构造器采用了一个 GLatLng 点。bindInfoWindowHtml 方法提供了用户单击标记时在 Info 窗口内显示的 HTML 文件片段。最后，清单 14 还通过使用 addOverlay 方法将标记添加到地图。
图 7 展示了添加标记后的地图：
图 7. 带标记的地图 现在您已经知道如何添加一个单一的点，但要自动地添加数据库里的所有点，还需要做两个小的更改。第一个更改是在 AirportController 中生成 map 闭包，这会返回一个 Airport 列表，如清单 15 所示：
清单 15. 返回一个 Airport 列表1
2
3
| def map = {
[airportList: Airport.list()]
}
|
接下来，需要遍历 Airport 列表并为每个 Airport 创建标记。在本系列的早期文章中，曾经介绍使用 <g:each> 标记向 HTML 表添加行。清单 16 使用这个标记创建必要的 JavaScript 行，这样才能在地图上显示 Airport：
清单 16. 动态地为地图添加标记1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <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());
<g:each in="${airportList}" status="i" var="airport">
var point${airport.id} = new GLatLng(${airport.lat}, ${airport.lng})
var marker${airport.id} = new GMarker(point${airport.id})
marker${airport.id}.bindInfoWindowHtml("${airport.iata}<br/>${airport.name}")
map.addOverlay(marker${airport.id})
</g:each>
}
}
</script>
|
图 8 展示了自动添加了标记后的地图：
图 8. 带有多个标记的地图 这个针对 Google Maps API 的简单介绍只涉及到些皮毛，您可以进行的操作远不止这些。您可能已经决定利用事件模型来实现 Ajax 调用，当单击标记时就会返回 JavaScript Object Notation（JSON）数据。您可以使用 GPolyline 在地图上描绘一个旅途中的各段行程。可以实现无限的可能性。要获得更多的信息，可以参考 Google 的在线文档。您也可以从我的 PDF 书籍 Google Maps API 获得关于 API 的适当介绍（参见 ）。
结束语地图添加到 Grails 应用程序需要具备 3 个条件。
第一个条件是对数据进行地理编码。有许多免费的地理编码器，它们可以将人类能识别的地理位置转换为纬度/经度点。几乎能够对所有的内容进行地理编码：街道地址、城市、县城、国家、邮政区码、电话号码、IP 地址等，甚至包括机场的 IATA 代码。
在您找到合适的地理编码器之后，创建一个 Grails 服务以把远程 Web 服务调用封装在可重用方法调用中。服务是为在单一区域对象上超越简单 CRUD 操作的方法而准备的。在默认情况下，服务并不与 URL 相关联，但是您可以轻易地在控制器中创建一个闭包，使这些服务可以通过 Web 找到。
最后，利用免费的 Web 地图绘制 API（比如 Google Map）在地图上描绘纬度/经度点。这些免费的服务通常也要求您的应用程序可以免费访问。如果您希望地图是隐私的，请考虑使用开放源代码 API（比如 OpenLayers），它提供了和 Google Map 一样的用户体验，但没有 Google Map 那样的使用限制（参见 ）。您将需要提供自己的地图绘制层，但可以将整个应用程序托管到自己的服务器上，从而保持它的隐私性。
在下一篇文章，我将讨论使 Grails 应用程序适用于移动电话的方法。您将看到如何优化 iPhone 的显示视图。我还将演示通过电子邮件从 Grails 发送信息，这个信息将在移动电话中显示为 SMS 消息。 那时，您将享受精通 Grails 的乐趣。 |
