Beginning Google Maps Applications with Rails and Ajax From Novice to Professional - Chapter One

Google Maps and Rails

    过去的一年对于 web 开发人员来讲充满着难以置信的兴奋。新的开发工具使 web 开发变得更加容易，更加产品化，同时带来更多的乐趣。

你可以把更多的数据，服务方面的 API 通过有趣的方式组合在一起。作为开发人员，我们从技术中获得了前所未有的乐趣。这本书把主要的精力放在对 Google Maps API的诠释上，

如果你已经拿到了这本书，你可能已经发现了 Google Maps 的重要性。如果你需要一个随手查阅的提示，也可以到 Google Maps Mania (http://googlemapsmania.blogspot.com/)

上转一转，领略一下开发社区给 Google Maps 带来的变革。 Google Maps API 孕育了一种令人难以割舍的 web 基础应用，你可以轻松的把它架设在一个同样令人感到兴奋的web平台上：

Ruby on Rails。

    Rails 架构可以极大的提升以数据库为基础的web应用程序的开发效率，Rails 开发起来很直接，功能强大，而且是免费的。Rails 可以轻松的搭建大型 web 应用程序，

而这些事情在两年前是难以想象的。

    在接下来的一章中，你会经历一个简单的包括标记（marker），地形编码（geocoding ）的例子，还有一些更加深入的主题，例如如何获得数据，呈现数据坐标（points），

提供一个有用的用户接口。

    在Ruby on Rails 平台架设 Google Maps 有许多好处，Rails 可以轻松的提供一些 XML 支持，而 XML 在 Google Maps 中被广泛的应用，Rails 同时对 JSON (JavaScript Object Notation), 提供了友好的支持，这种简单的数据结构可以轻松的从服务器端发送数据到客户端。Ruby自身也包括了一些功能强大的类库，可以实现屏幕擦除（screenscraping），

这一点我们会在后边的章节中详细介绍。

    我们主观的做了一个假设，假设当你拿到这本书的时候，你已经有一些Rails开发经验，你已经在你的电脑上安装了Ruby和Rails开发环境，并且可以成功的运行应用程序。如果事实并非如此，

我们在本章的末尾列出了一些帮助信息，使你尽快的上手Rails，例如“如何开始使用Ruby和Rails？（Just Getting Started with Ruby and Rails?）”。即便你现在已经是一个Rails骨灰级玩家，

你仍然可以从这本书中享受地图程序开发给你来的乐趣，并且使你同样成为一个地图程序开发的骨灰级玩家。Rails框架，Ruby语言，Google Maps API是你在畅游这本书时不可或缺的旅伴。

    我们知道你已经迫不及待的开始一个地图项目了，但是在我们开始编写代码之前，还是先来粗略的了解两种制作地图项目的方法：KML（Keyhole MarkupLanguage）files 和

Wayfaring map site。他们都是我们通往成功道路上的奠基石，我们将使用他们来做几个简单的演示。在第二章中，我们才会开始研究代码，到那个时候，你会真正领略到你可以打造出什么样的作品。

    KML: Your First Map

    KML 是在 Google map 中显示标记（marker）和添加内容的最简单的方法之一，如你所料，简单往往会为丧失灵活性而付出代价，但 KML 仍然可以作为一个开始 Google map 项目的非常好的选择，早在 2006 年 7 月，Google map 官方网站就宣布其对 KML 测绘文件提供支持，你可以简单的在 Google Maps 的搜索框中输入一个URL，Google Maps 就会返回一个标识位置的 KML

文件。我们不会深入讨论这个实现过程，取而代之我们将马上展示一个简单而强大的 KML 的例子。

 

---

    提示：Keyhole Markup Language 是基于 XML 和 Google Earth 并被命名为 keyhole 的项目，Google 于 2004 年末正式启动 Keyhole 项目。

 

---

    我们创建了一个被命名为 toronto.kml的文件，并把 例子 1-1 中的内容写入其中。这段内容引自 Wikipedia，用于手动的从 Google Maps 上找到这些坐标。 

    代码 1-1. 一个简单的 KML 文件

<? xml version = "1.0" encoding="UTF-8"?> 

<kml xmlns="http://www.google.com/earth/kml/2"> 

 <Document> 

    <name>toronto.kml</name> 

    <Placemark> 

      <name>CN Tower</name> 

      <description> 

        The CN Tower (Canada's National Tower, Canadian National Tower), 

        at 553.33 metres (1,815 ft., 5 inches) is the tallest ➥ 

        freestanding structure on land. 

        It is located in the city of Toronto, Ontario, Canada, and is considered the 

        signature icon of the city. The CN Tower attracts close to two million visitors 

        annually. http://en.wikipedia.org/wiki/CN_Tower 

      </description> 

      <Point> 

        <coordinates>-79.386864,43.642426</coordinates> 

      </Point> 

    </Placemark> 

 </Document> 

</kml>

    在这个真实的文件中（http://book.earthcode.com/kml/toronto.kml），我们添加了两个地点标记（Placemark ）的子元素用于标记两个多伦多的标志性建筑。想要在 Google Maps

上查看结果，只需把这个URL粘贴到 Google Maps 的搜索框中，也可以直接点击下边的链接：

    http://maps.google.com/maps?f=q&hl=en&q=http://book.earthcode.com/kml/toronto.kml.

    图示1-1即为显示结果：

    

    图示1-1：一个简单的 KML 数据文件在 Google Maps 上的显示结果. 

    的确立竿见影，不是吗？正如你所看到的，如果仅仅想展示一系列地点，场所，一个 KML 文件基本上就能搞定，如果你想标记一个你常去钓鱼的鱼塘，那么建立一个 KML 文件，把它发布到免费的服务器空间（host）上，这样就搞定了。但是仅仅这样我们就会满足吗？毕竟对于强大的 KML 来讲，现在的例子还没有提供与用户交互的功能。事实上在第二章中大多数例子中，我们只会体验一些 Google 发布的功能展示，但是当我们来到第三章的时候，你就会亲身领略 Google Maps API 的强大功能。

    在我们继续前进之前，让我们来快速体验一下另一种在线获得地图的方法。

    Wayfaring: Your Second Map

    一些服务商提供免费发布手绘地图文件服务，我们挑选其中的一个服务 Wayfaring 作为我们的示例。如图示1-2所示，Wayfaring 以其优质的功能设计和活跃的社区支持（社区提供大量的讨论和资源共享）而著称，同事Wayfaring 也是尤 Ruby on Rails 打造的。

   

    图示1-2 ：Wayfaring 首页

    Wayfaring 是一个地图服务应用，它使用 Google Map API，并且允许用户快速的创建地图。举个例子，有些人制作了他们的休假旅行图；而另一些人制作了他们的家乡的地图。通过它，我们可以带你一起领略加州山景的想象之旅。跟着 Wayfaring 的提示，创建一个帐户（点击 Log In 将会显示创建帐户的提示），一旦你创建了一个帐户，你就可以点击右上方的 Create Map按钮创建你自己的地图了。

    第一章 Wayfaring 网站使用简介部分暂时略去。英文原文内容如下：

     Adding the First Point

    Let’s start by adding the home airport for our imaginary journey. We’re going to use Lester B.Pearson International Airport in Toronto, Ontario, Canada, but you could use the airport closest to you. Since Pearson is an international location (outside the United States), you need to drag and zoom the map view until you find it. If you’re in the United States, you can use the nifty Jump To feature to search by text string. Figure 1-3 shows Pearson nicely centered and zoomed.    

   

    Figure 1-4. Your flight landing at San Francisco International Airport

     Adding the Destination Point

    Now that you’re in San Francisco, let’s figure out how to get to the Googleplex directly. Click Add aWaypoint. Your destination is Google, so the new point is called The Googleplex. Use the address box feature to jump directly to 1600 Amphitheatre Parkway, Mountain View, California, 94043. Wayfaring is able to determine latitude and longitude from an address via a process called geocoding, which you’ll see a lot more of in Chapter 4.

    To confirm you’re in the right place, click the Sat button on the top-right corner of the map to switch it over to satellite mode. You should see something resembling Figure 1-5.

   

    Figure 1-5. The Googleplex

    Adding a Driving Route

    Next, let’s figure out how far the drive is. Routes don’t really have a starting and ending point in Wayfaring from a visual point of view, so you can start your route from the Googleplex and work your way backward. Switch back into Map mode or Hybrid mode so you can see the roads more clearly. From the Map Editor screen, select Add a Route and click the point you just added. Use 10 to 20 dots to carefully trace the trip from Mountain View back up the Bayshore Freeway (U.S.Highway 101) to the airport. You’ll end up with about 23 miles of driving, as shown in Figure 1-6.       

   

    Figure 1-6. The drive down the Bayshore Freeway to the Googleplex

    That’s it. You can use the same principles to make an annotated map of your vacation or calculate how far you’re going to travel; and best of all, it’s a snap to share it. To see this map live, visit http://www.wayfaring.com/maps/show/17131.

    Got Rails? 

    当然，这是一本编程相关的书，你可能已经迫不及待的想一头钻进代码中，做一些真正不寻常的事情，Wayfaring 的确强大，但是它不能带来舒适的编程体验。提及与程序的交互，让我们把视线转向 Ruby on Rails，这款服务器端框架。我们在本章的开始部分提到，我们假定这本书的读者有一些 Ruby and Rails 开发经验-至少可以独立完成 Rails 应用程序的运行。这意味着，你应该：

• 在你的电脑上安装了 Ruby（1.8.4 或者更高版本）和 Rails（1.1.5 或者更高版本）；
• 了解如何通过 Rails 命令行来创建一个 Rails 应用程序架构，并且熟练掌握 Rails 应用的 MVC（model/view/controller）开发模式；
• 了解如何通过 WEBrick, Mongrel 或者其他 web 服务器运行 Rails 应用程序；
• 掌握一门数据库技术。本书的大多例子使用 MySQL 进行开发，但是你也可以使用其他数据库引擎作为你的选择；
• 选择一个适合自己的开发工具-比如 TextMate, RadRails, 或者 Vim。

     下面，我们同样列出了一些条款，对于阅读本书而言，这些都不是你所必须掌握的：

• 你不需要了解很多 prototype.js 脚本库的细节。很多开发者对于 Prototype 感到困惑，可能是因为文档比较少的吧。我们做出了明智的决定，这本书上的大多应用尽量避免使用 prototype.js，但是仍然会时不时的使用到它；
• 你不必掌握 RJS。 RJS 是 Rails 中的模板（就像RHTML），它提供简单的方式实现网页中大量的 Javascript 功能，从而简化了开发。因为 Google Maps API 本身提供了 JavaScript 接口，所以我们还是主要以手写脚本的方式进行开发；
• 你不需要是一名 JavaScript 编程高手。尽管 Google Maps API 提供 JavaScript 接口，但是随着你的 JavaScript 方面的技能的提升，你可以显得更加从容；（原文：You don’t need to be an expert in JavaScript programming. Yes, the Google Maps API is implemented in JavaScript, but you’ll be ramping up on JavaScript techniques and
  principles as you go.）
• 现在你还不需要一个 Rails 应用程序的网络空间。当然，有一天，当你的应用程序将会举世震惊的时候，你会为你的程序架设一台服务器的，但是时下，对于这本书上的例子而言，在你的电脑上简单的运行一下，还是比较现实的。

 

---

    Just Getting Started with Ruby and Rails? 

    如果你刚刚准备学习 Ruby and Rails，并且决定学习一下地图应用程序开发，你可能希望得到一些辅助材料，从而加快学习进度。 Ruby on Rails 可能会比 PHP 或者 ColdFusion 的学习曲线长一些，希望以下资料对你的学习提供一些额外的帮助：

• 《Beginning Ruby: From Novice to Professional by Peter Cooper 》( http://www.apress.com/book/bookDisplay.html?bID=10244)》，我承认许多开发者是通过 Rails 开始了解 Ruby 的。如果你恰好是这样，我极力推荐你补充一下 Ruby 方面的知识，之后再把更多的精力放在 Rails 开发上；
• 《Beginning Ruby on Rails: From Novice to Professional》( http://www.apress.com/book/bookDisplay.html?bID=10124),作者： Cloves Carneiro Jr. and Jeffrey Allan Hardy。

---

     接下来会有哪些精彩？

    我们知道你正在热切的期盼着打造真正属于你自己的地图应用程序。在这一章的最后部分，你已经通过 Wayfaring 了解了几乎全部使用 JavaScript 和 XHTML 实现的 Google Maps 功能

（除了 多插线（polylines）和 距离（distances），本书的第十章涵盖这些内容）。这本书的宗旨，就是让你掌握打造一个 Wayfaring 克隆项目的全部理论基础。那么接下来会是哪些内容呢？

这本书分为三个部分和两个附录。

    第一部分会持续到第四章，展示了许多充满乐趣的例子用来引导用读者入门。通过这部分，你可以打造一个地图，添加一些自己的小标记，而且使用一些免费的服务器端数据填充一些

地图编码。

    第二部分（第五章至第八章）会涉及到很多地图开发方面的主题，例如编写一个通用接口，处理大量坐标点（points），通过一些原始数据实现你自己想要的地图效果。

    第三部分（第九章至第十一章） 一些高级主题：打造客户层叠地图， 比如你自己的提示框和提示文本；（creating your own map tiles and projections；）通过球面公式计算地球表面面积，通过抓痕技术打造自己的地理编码（building your own geocoder from scratch.）。

    最后部分，附录中会提供一些 Google Maps API 第二版本中的参考。附录中还会提供一些扩展例子，你可以直接使用他们来丰富你自己的项目。

                                                                                                （第一章完。 2008年7月2日 刘 远 [email protected] ）