GMarker 构造器采用了一个 GLatLng 点。bindInfoWindowHtml 方法提供了用户单击标记时在 Info 窗口内显示的 HTML 文件片段。最后，清单 14 还通过使用 addOverlay 方法将标记添加到地图。

图 7 展示了添加标记后的地图：

图 7. 带标记的地图

现在您已经知道如何添加一个单一的点，但要自动地添加数据库里的所有点，还需要做两个小的更改 。第一个更改是在 AirportController 中生成 map 闭包，这会返回一个 Airport 列表，如清单 15 所 示：

清单 15. 返回一个 Airport 列表

def map = { 　 [airportList: Airport.list()] }

精通Grails: Grails服务和Google地图(9)

接下来，需要遍历 Airport 列表并为每个 Airport 创建标记。在本系列的早期文章中，曾经介绍使 用 <g:each> 标记向 HTML 表添加行。清单 16 使用这个标记创建必要的 JavaScript 行，这样才 能在地图上显示 Airport：

清单 16. 动态地为地图添加标记

<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 的在线文档。

结束语

地图添加到 Grails 应用程序需要具备 3 个条件。

第一个条件是对数据进行地理编码。有许多免费的地理编码器，它们可以将人类能识别的地理位置转 换为纬度/经度点。几乎能够对所有的内容进行地理编码：街道地址、城市、县城、国家、邮政区码、电 话号码、IP 地址等，甚至包括机场的 IATA 代码。

在您找到合适的地理编码器之后，创建一个 Grails 服务以把远程 Web 服务调用封装在可重用方法调 用中。服务是为在单一区域对象上超越简单 CRUD 操作的方法而准备的。在默认情况下，服务并不与 URL 相关联，但是您可以轻易地在控制器中创建一个闭包，使这些服务可以通过 Web 找到。

最后，利用免费的 Web 地图绘制 API（比如 Google Map）在地图上描绘纬度/经度点。这些免费的服 务通常也要求您的应用程序可以免费访

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!