12.4　向站点添加Google地图

Google Maps（http：//maps. google.com）是JavaScript复苏的最初典范。放大和缩小地图，沿着城市街道移动，以及在闪动的驱车指示等功能使得Google Maps成为了令人难以置信的有用站点。得益于对Ajax的聪明的使用，这个站点的响应性使得人们感觉它几乎就像是一个桌面程序。

但是Google Maps为Web设计者提供了更为强大的功能：Google Maps服务允许我们在自己的站点中嵌入一个地图。如果运行一个具体的业务（例如为商务构建站点），能够提供一个易于理解的地图和方向指示，这可以使你顾客盈门。幸运的是，使用jQuery的jMaps插件，可以很容易且直接地给Web页面添加交互式地图（如图12-2所示）。

高级用户提示进一步使用jQuery和Ajax

还有很多其他的jQuery插件可以使得Ajax开发进行得更快。在某些情况下，我们需要提供服务器端编程，插件只负责JavaScript部分。还有一些其他的程序也提供基本的服务器端编程。下面是一些较好的插件：

·Form插件。jQuery Form插件是给表单提交添加Ajax的一种简单方法。该插件远远超出了第11章讨论的基本功能，并且包含了文件上传的功能。它还带有表单验证。要了解详细信息，请访问http：//plug-ins.jquery.com/project/form。

·Autocomplete。这个jQuery UI项目提供了一个自动填充插件（http：//jqueryui.com/demos/auto-complete/），它允许你添加在Google和Amazon的搜索字段中经常看到的一种漂亮的功能。开始在文本字段输入一个单词，并且会显示一个下拉式菜单来提示可能的匹配。这会省去访问者很多录入，还会提供一个有用的提示列表。通过和Web服务器和Ajax一起工作，我们可以为搜索表单提供类似读懂访问者心理的功能。

·Ajax文件上传。如果你想要给站点添加文件上传，可以通过使用Ajax来发送该文件，确保这一过程对用户来说是无缝的。Uploadify插件（www.uploadify.com/）使得这一过程变得容易。

·Taconite。使用Ajax，我们可以从服务器接收信息并更新Web页面。然而，我们可能想要更新一个页面的多个区域，例如，如果访问者使用一个Ajax表单登录，我们可能想要在页面的一个部分显示其登录状态，在页面的另一个部分显示他上次在本站点访问过的页面的列表，并且在页面的另一个区域显示一个购物车。Taconite插件允许从Web服务器接收一个基本的XML文件，其中带有关于在Web页面的什么区域更新以及使用什么信息的简单说明。我们可以在http：//plug-ins.jquery.com/project/taconite找到关于这个插件的更多说明。

·Twitter。如果想要通过一种容易的方式将一个Twitter流添加到Web页面，查看Tweet！插件（http：//tweet.seaofclouds.com/）。Tweet！允许你添加自己的Twitter流，搜索其他Twitter用户的tweet，甚至只是按照关键字来搜索Twitter。

Jevgenijs Shtrauss开发的The GoMap插件（www.pittss.lv/jquery/gomap/）允许我们为任何Web页面添加Google地图，查询地图上两点之间的驱车指示，添加标记来突出显示地图上的一个位置等。使用该插件的基本步骤是：

1.添加来自Google Maps的一个外部JavaScript文件。

为了访问地图服务，我们需要从Google载入一个脚本。我们像下面这样使用＜script＞标签：

＜script src="http：//maps.google.com/maps/api/js?sensor=false"＞＜/script＞

这段代码载入了Google访问其地图服务所依赖的JavaScript。gmap3插件将这些代码构建到这个文件中，以提供一种更为友好的方式将地图添加到你的页面中。

图　12-2　尽管一张简单的地图图片是标识你（或者你的客户）的公司的位置的好方法，但如果可以使用像http：//maps.google.com这样的一个交互式地图会更好。访问者可以很容易地放大、缩小并移动一个Google地图。查找从一个地方到另一个地方的驱车指示，简直是小菜一碟。有了jMaps jQuery插件，可以很容易地把Google地图添加到你自己的Web站点

注意：GoMap使用Google Maps API的版本3。较早的Google Maps API要求你在Google注册，并且获取一个唯一的key，以便在你的站点上使用Google Maps。幸运的是，你不再需要在Google注册才能将地图添加到你的站点了。

2.添加两个jQuery文件。

当然，我们需要jQuery库，以及GoMap文件。GoMap文件可以从www.pittss.lv/jquery/gomap获得。这个文件提供了使得给站点添加地图变得如此容易的所有程序。因此，除了步骤2中的＜script＞标签，我们还需要添加如下所示的代码：

＜script src="js/jquery-1.6.3.min.js"＞＜/script＞

＜script src="js/jquery.gomap-1.3.2.min.js"＞＜/script＞

注意：我们已经将GoMap插件文件的一个副本包含在了教程文件中的_js文件夹下（参见1.3节的“注意”部分以了解下载教程文件的信息）。

3.给页面添加一个带有ID的空白＜div＞标签。

GoMap将在这个空白标签中添加地图，因此，把＜div＞放置到希望地图在页面中出现的位置。此外，我们需要提供一种方式来识别这个标签，因此，添加一个ID。这个标签的HTML如下所示：

＜div id="map"＞＜/div＞

此外，可以给页面的样式表添加一条CSS规则，用来定义页面上的地图的高度和宽度。例如：

map{

width：760px；

height：400px；

}

4.调用goMap（）函数。

最后，添加一个新的＜script＞标签、document.ready（）函数，并且调用goMap（）函数。要使用goMap（）函数，我们使用jQuery选择器$（'#map'）选择地图＜div＞，然后添加goMap（）：

＜script＞

$（document）.ready（function（）{

$（'#map'）.goMap（）；

}）；

＜/script＞

仅仅调用goMap（）函数，将会给你一张以Latvia的某处为中心的地图。（除非你来自Latvia）你更可能想要指向一个特定位置（例如，你的公司或你的客户的公司的位置）的地图。我们接下来将学习如何做到这点。

12.4.1　为地图设定位置

一个Google Map有一个中心点，由所表示的位置的经度和纬度的数值来定义。如果想要把地图的中心设置到一个地方，例如，你的公司的地址或者你的下一个生日宴会的地点，需要获取该位置的经度和纬度。这很简单：

1.访问http：//itouchmap.com/latlong.html，在Address栏中输入一个地址，然后单击Go按钮。

这个有用的Web站点提供了你指定地址的任何位置的经度和纬度。记下这些信息，我们就可以在下一步中使用它们了。

提示：你也可以直接从Google Maps获取经度和纬度信息。访问http：//maps.google.com并且搜索你想要在地图中使用的一个位置。然后，在浏览器的地址栏中输入javascript：vo id（prompt（'’，gApplication.getMap（）.getCenter（）））；。将会出现一个JavaScript警告框，其中带有当前地图中心位置的经度和纬度。

2.通过添加如下代码更新goMap（）函数：

1＜script＞

2$（document）.ready（function（）{

3$（'#map'）.goMap（{

4 latitude：45.53940，

5 longitude：-122.59025

6}）；//end goMap

7}）；//end ready

8＜/script＞

在这个例子中，我们传递了一个对象直接量，即第3行的开始{到第6行的结束}，它包含了该插件的选项。第一项latitude指定了地图中心的纬度，而第二项longitude是地图中心的经度。你应该使用想要的纬度和经度来替换第5行和第6行所列出的两个数字。

幸运的是，GoMap插件功能多样，能够直接使用一个地址来定位地图。你可以直接使用包含了想要的地址的一个字符串的address项，来替代latitude和longitude项。例如：

$（'#map'）.goMap（{

address：’2200 NE 71st Ave Portland, OR, USA'

}）；//end goMap

如果只需要一个大概的区域范围，例如，以一个特定城市为中心的地图，也可以做到这点：

$（'#map'）.goMap（{

address：'Portland, OR, USA'

}）；//end goMap

实际上，你可以使用在Google Maps搜索框（http：//maps.google.com）中的任何内容来作为address元素，即便是知名的地标的名称，例如，“Kennedy Space Center”或“Eiffel Tower”。然而，Google可能并不总是能够定位一个地址，并且，当你想要在一个很大的区域突出显示一个特定的位置的时候，地址并不总是很好，例如喜爱的一个公园中的一个位置。在这种情况下，你将需要使用上面所介绍的纬度和经度值。

注意：另一个值得一看的Google Maps插件是GMAP3（http：//gmap3.net/）。它提供了比GoMap插件更多的功能，但是，它用起来也更为复杂，并且文件很大。GMAP3的一项漂亮的功能是，在地图上生成驾驶方向。