精通Grails: 用JSON和Ajax实现异步Grails - 编程入门网

接下来的任务是创建 addAirport()。

添加处理 JSON 的 JavaScript

您将创建的 addAirport() 函数负责两项简单的任务：将 JSON 对象装载到内存中，然后为各种目的 使用字段。在这里，您使用纬度和经度值创建一个 GMarker，并将它添加到地图中。

要使 <g:formRemote> 工作，必须在 head 部分包含 Prototype 库，如清单 11 所示：

清单 11. 在 GSP 中包含 Prototype

<g:javascript　library="prototype"　/>

接着，将清单 12 中的 JavaScript 添加到 init() 函数后面：

清单 12. 实现 addAirport 和 drawLine

<script　type="text/javascript"> var　airportMarkers　=　[] var　line function　addAirport(response,　position)　{ 　 var　airport　=　eval(''(''　+　response.responseText　+　'')'') 　 var　label　=　airport.iata　+　"　--　"　+　airport.name 　 var　marker　=　new　GMarker(new　GLatLng(airport.lat,　airport.lng),　{title:label}) 　 marker.bindInfoWindowHtml(label) 　 if(airportMarkers[position]　!=　null){ 　　 map.removeOverlay(airportMarkers[position]) 　 } 　 if(airport.name　!=　"Not　found"){ 　　 airportMarkers[position]　=　marker　 　　 map.addOverlay(marker) 　 } 　 document.getElementById("airport_"　+　position).innerHTML　=　airport.name 　 drawLine() } function　drawLine(){ 　 if(line　!=　null){ 　　 map.removeOverlay(line) 　 } 　 if(airportMarkers.length　==　2){ 　　 line　=　new　GPolyline([airportMarkers[0].getLatLng(),　airportMarkers[1].getLatLng ()]) 　　 map.addOverlay(line) 　 } } </script>

精通Grails: 用JSON和Ajax实现异步Grails(8)

有了 airport 对象的一个句柄之后，创建一个新的 GMarker。这就是我们在 Google Maps 上用于查 看的 “红图钉”。title 属性告诉 API，当用户的鼠标悬停在该标记上时，显示什么内容作为工具提示 。bindInfoWindowHtml() 方法告诉 API，当用户在该标记上单击鼠标时，显示什么内容。将这个标记作 为叠加层添加到地图上之后，调用 drawLine() 函数。顾名思义，它在两个机场标记之间画一条线（如果 它们都存在的话）。

输入两个机场，应该会看到如图 5 所示的页面：

图 5. 显示两个机场和它们之间的连线

更改 GSP 文件时，别忘了刷新 Web 浏览器。

您已经获得从本地 Grails 应用程序返回的 JSON，在下一节，您将动态地从一个远程 Web 服务得到 JSON。当然，得到 JSON 之后，就可以像在这个例子中一样使用它：将它装载到内存中，然后直接访问不 同的属性。

远程 JSON 还是本地 JSON？

接下来的任务是显示目的地机场附近的 10 家宾馆。这需要远程获取数据。

应该本地存放数据，还是在处理每个请求时都远程地获取数据？对于这个问题，没有标准的答案。对 于机场数据集，我觉得完全可以本地存放。这样的数据很容易得到，而且体积不大，容易存放。（美国只 有 901 个机场，很多主要的机场基本上是保持不变的，这份列表不会那么快就过时）。

如果机场数据集不稳定，并且太大不便本地存储，或者不能单独下载，那么我会更倾向于远程地请求 它。您在 “Grails 服务和 Google

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