添加处理 JSON 的 JavaScript
您将创建的 addAirport() 函数负责两项简单的任务：将 JSON 对象装载到内存中，然后为各种目的使用字段。在这里，您使用纬度和经度值创建一个 GMarker，并将它添加到地图中。
要使
清单 11. 在 GSP 中包含 Prototype
接着，将清单 12 中的 JavaScript 添加到 init() 函数后面：
清单 12. 实现 addAirport 和 drawLine
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>
清单 12 中的代码做的第一件事是声明两个新的变量：一个变量用于存放线条，另一个数组用于存放两个机场标记。对传入的 JSON 调用 eval() 之后，就可以直接调用 airport.iata、airport.name、airport.lat 和 airport.lng 等字段。(要温习 JSON 对象，请参见 清单 5)。
有了 airport 对象的一个句柄之后，创建一个新的 GMarker。这就是我们在 Google Maps 上用于查看的 “红图钉”。title 属性告诉 API，当用户的鼠标悬停在该标记上时，显示什么内容作为工具提示。bindInfoWindowHtml() 方法告诉 API，当用户在该标记上单击鼠标时，显示什么内容。将这个标记作为叠加层添加到地图上之后，调用 drawLine() 函数。顾名思义，它在两个机场标记之间画一条线(如果它们都存在的话)。
要了解关于 GMarker、GLatLng 和 GPolyline 等的 Google Maps API 对象的更多信息，请参阅在线文档(见 参考资料)。
输入两个机场，应该会看到如图 5 所示的页面：
图 5. 显示两个机场和它们之间的连线
更改 GSP 文件时，别忘了刷新 Web 浏览器。
您已经获得从本地 Grails 应用程序返回的 JSON，在下一节，您将动态地从一个远程 Web 服务得到 JSON。当然，得到 JSON 之后，就可以像在这个例子中一样使用它：将它装载到内存中，然后直接访问不同的属性。
