打开APP
userphoto
未登录

开通VIP,畅享免费电子书等14项超值服

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

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 页面的脚本源块中可以对它进行配置,如下所示(为简洁起见,截断了密钥):

<script
  src="//maps.google.com/maps?key=ABQIAAAAT"
  type="text/javascript">
</script>

  从 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...

本站仅提供存储服务,所有内容均由用户发布,如发现有害或侵权内容,请点击举报
打开APP,阅读全文并永久保存 查看更多类似文章
猜你喜欢
类似文章
【热】打开小程序,算一算2024你的财运
Mashups:Web 应用程序新成员
混血网站诞生 公司相互嫁接成就新商业模式
mashup使Web呈现新外观
2007最受欢迎的十大Ajax技术文章 , 教程,技术,ajax, ,
google map 应用学习网站 - JavaScript - web - JavaEye论坛
建筑师怎样玩转谷歌地图! -GIS 系列教程之一
更多类似文章 >>
生活服务
热点新闻
分享 收藏 导长图 关注 下载文章
绑定账号成功
后续可登录账号畅享VIP特权!
如果VIP功能使用有故障,
可点击这里联系客服!

联系客服