Ajax支持的Google地图Mashup教程(3)

来源:百度文库 编辑:神马文学网 时间:2024/04/29 08:22:31

Ajax支持的Google地图Mashup教程(3)

作者: ,  出处:Dev2Dev, 责任编辑: 叶江, 2007-06-13 14:59
  本文中将使用工具轻松构建终极的Hello World mashup:Google地图mashup……
 

  Google 地图 API

  Google地图和 Yahoo!地图(我们不会进一步讨论Yahoo!)均创建了可公开访问的JavaScript API,用于免费将地图嵌入随机的Web 站点。这形成了小规模的mashup Web 应用程序集,它们使用这些API来标绘地理位置,从芝加哥的 犯罪地点到全世界的AP 新闻发生地。 这种流行的模式是查询针对一组地址的服务,然后使用Google Map API映射这些地址,这也是我构建mashup所使用的方法。您会看到,这种实现方法简单直白,但是有两件事需要注意。

  首先,浏览器的跨域安全功能似乎不利于用JavaScript 在浏览器中实现Google 地图 mashup。这是由于用户必须导航到托管REST 服务的网络域,该服务会生成一个地址列表。在该网络域中,将不允许浏览器请求http://maps.google.com 。Google 在其JavaScript 库中实现了一种解决方案,重载对于google.com 脚本的资源请求,以便将数据注入到浏览器中。

  第二件事不是技术问题,而是商业问题。Google 拥有映射数据和API ,保留定义 服务条款的权利,Google 限制每个Web 站点的免费服务为每天50,000 请求。如果这是个问题,那么 付费服务 是没有限制的。为了实施这种使用策略,每个Web 站点都有一个惟一的API密钥,必须将其配置为可追踪站点的使用情况。获得该密钥是免费的,而且简单容易, 然后在HTML 页面的脚本源块中可以对它进行配置,如下所示(为简洁起见,截断了密钥):

  从 REST 数据服务检索地理位置

  既然已经具备了开发所用的工具箱,那么就该开始实现Ajax 支持的Google 地图mashup 了。本节将逐步介绍如何构造一个REST 服务,该服务通过地址指示位置。在下一小节中,我们将把REST 服务连接到Google 地图来创建mashup。

  关于 REST 服务,要说的第一点是它很简单。本教程的内容和演示可以作为构建更复杂的mashup 的起点。因此,其中的 Hello World mashup 尽可能简单而去掉复杂性。为此, REST 服务是一个静态服务:位置是硬编码到HTML 页面中的。尽管这看似不灵活,但用一个动态服务很容易就可以代替整个方法。精通JSP、PHP或 Ruby on Rails 的开发人员可以用从数据库、Web 服务或其他技术中寻找方法来代替静态的HTML 服务。

  REST 服务是在示例的getD2DSites.html 中实现的。请看一下这个文件,您会发现它只是JSON 格式的地址对象的序列化JavaScript 数组:

{"locations":  
{"location":[          
        {"id":  "WashingtonDC",                
         "city": "Washington DC",                      
         "location": "Hilton Hotel, Tysons Corner",
         "address": "7920 Jones Branch Drive",
         "date": "May 2nd, 2007"               
        },
        {"id":  "NYC",                 
         "city": "New York City",                      
         "location": "Grand Hyatt New York",
         "address": "109 East 42nd Street, NY 10017",
         "date": "May 3rd, 2007"               
        },
        etc...