一、动态标记
现在,既然我们已经对Google Maps API工作机理有了一个基本的理解,并且了解了Ajax对我们有什么帮助;那么接下来,让我们来探讨如何使用Ajax技术把一幅Google地图集成到我们的Java web应用程序中。作为示例,在我们的Elbonian网站上,我们想显示Elbonia地区所有的旅游景点。你可能想实现一种交互式地图;从中,用户能够使用地图上的标记定位一个特定的旅游景点。当用户点击一个景点时,一个显示有详细信息的窗口弹出。 为了实现以上目的,首先要集成一组服务器提供的标记。这样做的一种方法是在服务器端动态地生成JavaScript代码。然而,这是相当麻烦的,并且会导致生成过度庞大的HTML页面。幸好,还存在一种更好的方法。Google Maps API提供了一个称为GDownloadUrl()的方便的函数,你可以通过这个函数以XML形式下载数据并且在你的JavaScript代码中处理它。这样以来,把你的XML数据转换成Google Map标记是很容易的。 这个Ajax应用程序在其服务器端利用了仅有的一个servlet。这个servlet以XML形式提供关于旅游景点和包含这些旅游景点城市的数据。这个servlet的实现细节对于这里的讨论来说并不特别重要;最重要的是,这个servlet基于它接收的查询参数返回的是XML(而不是HTML)数据: 这里大多数的代码也大都加入了注释。大致说来,这个servlet经由DAO对象实现数据库查询,并使用XStream技术把数据转换成XML形式(还可以把这些数据存储在一个普通XML文件中)。当然,把地理站点坐标存储在一个数据库中的优点是可以根据需要对它们进行更新—例如,在发生一场大型地震或陆地滑坡或大陆漂移等情况下。 然后,这个XML被直接写到servlet响应流中。结果列表看起来如下所示: <list> 在客户端,我们取回XML标记列表,并且在地图上生成一组相应的标记。为了实现这一目的,我们经由一个Google工具类—GXmlHttp—来使用Ajax。这个类把一个查询发送到服务器端以取回一个XML文档—然后你可以使用JavaScript DOM函数对之加以分析。 下面,让我们来分析一下如何在真实环境下应用上面的技术。上面的XML数据由loadSites()函数(它再调用processSiteData()函数来处理站点数据)取回: <script language="javascript" type="text/javascript"> 这个processSiteData()函数及相关联的displaySiteMarkers()函数,都使用了JavaScript DOM处理技术来提取关于旅游景点的有用数据,并且在地图上创建相应的标记: <script language="javascript" type="text/javascript"> [0].firstChild.nodeValue); [0].firstChild.nodeValue); "id")[0].firstChild.nodeValue; "name")[0].firstChild.nodeValue;
public class TouristSiteDirectoryServlet
extends javax.servlet.http.HttpServlet
implements javax.servlet.Servlet {
...
/**
*数据存取对象提供了搜索旅游景点数据库的方法
*/
private SiteDAO getSiteDAO() {
...
}
/**
*提供的数据存取对象提供了搜索旅游景点数据库的方法 */
protected void doGet(HttpServletRequest request,HttpServletResponse response)
throws ServletException, IOException {
String method=request.getParameter("method");
XStream xstream = new XStream();
xstream.alias("marker", Marker.class);
response.setContentType("application/xml");
if (method == null) {
String id = request.getParameter("id");
Site site = getSiteDAO().findSiteById(id);
xstream.alias("site", Site.class);
String xml = xstream.toXML(site);
response.getWriter().write(xml);
} else if (method.equals("findAll")) {
List
String xml = xstream.toXML(sites);
response.getWriter().write(xml);
} else if (method.equals("findAllCities")) {
List
String xml = xstream.toXML(cities);
response.getWriter().write(xml);
} else if (method.equals("findByCity")) {
String city = request.getParameter("city");
List
String xml = xstream.toXML(sites);
response.getWriter().write(xml);
}
}
}
<marker>
<id>3</id>
<name>The Famous Mud Baths of central Elbonia</name>
<latitude>-36.87</latitude>
<longitude>185.22</longitude>
</marker>
<marker>
<id>5</id>
<name>The North Elbonian Mud Baths</name>
<latitude>-36.77</latitude>
<longitude>185.92</longitude>
</marker>
...
</list>
function loadSites() {
var request = GXmlHttp.create();
request.open("GET", "/maps/SiteDirectory?method=findAll", true);
request.onreadystatechange = getCallbackFunction(request, processSiteData);
request.send(null);
}
</script>
function processSiteData(xmlDoc){
//取得标记数组并循环遍历它
siteMarkers = xmlDoc.documentElement.getElementsByTagName("marker");
displaySitesMarkers();
}
function displaySitesMarkers() {
map.clearOverlays();
for (var i = 0; i < siteMarkers.length; i++) {
//获得每个标记的属性
var lat = parseFloat(siteMarkers[i].getElementsByTagName("latitude")
var lng = parseFloat(siteMarkers[i].getElementsByTagName("longitude")
var id = siteMarkers[i].getElementsByTagName(
var label = siteMarkers[i].getElementsByTagName(
createSiteMarker(new GLatLng(lat,lng),label,id);
}
}
</script> 共2页: 1 [2] 下一页 【内容导航】
|
|||
| · 51CTO主编推荐经典专题 · RAID——磁盘阵列基础 · 充电计划之热门IT认证.. · 51CTO技术自测 挑战自.. · CISSP认证成长之路 · AMD Phenom三核处理器.. · 国际文档格式标准开战 · 2007年互联网大会 |
· 我是黑客我怕谁——讲.. · ARP攻击防范与解决方案 · Solaris 10 配置管理 · Solaris基础知识入门 · RIP路由协议专栏 · MPLS路由协议专栏 · OSPF路由协议专栏 · 思科路由器产品 |
||
|
|||
| · Java基础教程 · VPN技术 · ARP攻击防范与解决方案 · SQL Server 2005全解 · SOA 面向服务架构 · SQL Server 2005全解 · Java编程开发手册 · RAID——磁盘阵列基础 |
· 三层交换技术专题 · SQL Server入门到精通 · Windows Server 2003企.. · Windows远程桌面应用 · C#技术开发指南 · VPN技术 · Solaris 10 配置管理 · C#技术开发指南 |
||
|
|||
| · ARP攻击防范与解决方案 · VPN技术 · SQL Server 2005全解 · Java基础教程 · SQL Server入门到精通 · SQL Server 2005全解 · SOA 面向服务架构 · Java编程开发手册 |
· C#技术开发指南 · 三层交换技术专题 · C#技术开发指南 · Windows远程桌面应用 · RAID——磁盘阵列基础 · Windows Server 2003企.. · 邮件服务器专题 · wimax技术与趋势 |
||
| ·DB2 Viper快速入门 ·DB2 9数据库的镜像分割与.. |
·将XML应用程序从DB2 8.x.. ·DB2 9中的pureXML:如何.. |
| ·服务器中的“傻瓜机”在.. ·盖茨也喜欢登录Youtube看.. |
· · |
| ·拯救系统管理员 ·美国选民:我为什么选布什 |
·VMware公司中文命名挑战赛 ·我们真缺乏创新吗? |
| ·J0ker的CISSP之路:复习-.. ·J0ker的CISSP之路:复习-I.. |
·9月第3周安全回顾 内网安.. ·教你几招识别和防御Web网.. |
| · NGN:下一代网络 · 网络访问中断大排查 · FTTx光纤接入 |
· 教你使用Anti ARP Sniff.. · 网络嗅探教程:使用Snif.. · 常见病毒手工清除方法大.. |
| · C++是垃圾语言?! · 2007年IT界七大抄袭事件 · Java实用开发全集 |
· 解析Ajax开发框架 走进A.. · 基于Google Maps与Ajax.. · 使用GWT实现文件上传功能 |
| · 热门 IT 培训认证官方资.. · Ubuntu 中文开源频道 · Solaris基础知识入门 |
· 费力不讨好 数据中心主.. · AMD Phenom三核处理器解.. · 51CTO主编推荐经典专题 |
| · 甲骨文Oracle 11g正式发.. · Oracle数据库开发之PL/S.. · Oracle数据库开发基础教.. |
· 存储2006,一个并购的大.. · IDC宣布浪潮蝉联存储市.. · 双机热备技术 |