Ajax支持的Google地图 MASHUP教程(2)_H5之家 - 中国HTML5教程资源分享第一站

{"location":
        {"id": "WashingtonDC",
         "city": "Washington DC",
         "venue": "Hilton Hotel, Tysons Corner",
         "address": "7920 Jones Branch Drive"
        }
}

　　有关JSON的详细描述，请参见 JSON简介(Dev2Dev中文版， 2007)。

　　Google 地图 API

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

　　首先，浏览器的跨域安全功能似乎不利于用JavaScript. 在浏览器中实现Google 地图 mashup。这是由于用户必须导航到托管REST 服务的网络域，该服务会生成一个地址列表。在该网络域中，将不允许浏览器请求ttp://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...