我的书签
添加书签
移除书签12.4.5 GoMap教程
在本教程中，我们将经历给Web页面添加GoMap插件的必需步骤。
注意：参见1.3节中的“注意”部分以获取如何下载教程文件的信息。
1.在文本编辑器中打开chapter12文件夹下的map.html。
在开始向页面添加任何JavaScript之前，我们将添加一个用来保存地图的空白＜div＞修改HTML。
2.在页面的正文中找到＜h1＞标签（＜h1＞Google Maps＜/h1＞）。在这个标签后面的空行中单击并添加：
＜div id="map"＞＜/div＞
我们只是创建了一个占位符，GoMap插件最终将向其中添加一个Google地图。接下来将添加一个CSS样式来设置地图的高度和宽度。
3.在该文件的顶部是一个内部样式表。在开始的＜style＞标签之后添加一条CSS规则，输入：
map{
height：400px；
width：760px；
}
在这里，地图区域设置为500像素的正方形。现在该添加一些JavaScript了。4.单击结束的＜/head＞标签上方的空白行并输入：
＜script src="http：//maps.google.com/maps/api/js?sensor=false"＞＜/script＞
＜script src="../_js/jquery-1.6.3.min.js"＞＜/script＞
＜script src="../_js/jquery.gomap-1.3.2.min.js"＞＜/script＞
第一个＜script＞标签从Google.com载入了JavaScript文件，其中包含了和Google Maps服务通信所需的代码。第二个＜script＞标签载入了jQuery，而第三个＜script＞标签载入了GoMap插件文件。现在，我们准备好创建地图了。
5.在步骤4中添加的＜script＞标签的下面再添加另一个＜script＞标签，并包含jQuery的$（document）.ready（）函数：
＜script＞
$（document）.ready（function（）{
}）；//end ready
＜/script＞
现在，只需要对步骤2中创建的空的＜div＞应用goMap（）函数。6.在$（document）.ready（）函数内部添加如下所示的代码：
$（'#map'）.goMap（{
latitude：45.53940，
longitude：-122.59025
}）；//end goMap
这段代码在步骤2中添加的div内放置了一张地图，显示了一个特定的经度和纬度作为地图的中央点（如果你想要显示一个不同地方的地图，随意修改这个值）。
7.保存文件并在Web浏览器中预览。
假设你连接到了Internet（因而浏览器可以连接到Google.com），将会看到一个760×400像素宽的地图。
让我们来把地图放大点。
8.编辑脚本，在mapCenter选项的后面添加一个逗号并插入一个mapZoom设置（修改的地方用粗体显示）：
$（'#map'）.goMap（{
latitude：45.53940，
longitude：-122.59025，
zoom：16
}）；//end goMap
我们可以完全缩放（0），或者缩放到街道级别（17）。保存该页面并在Web浏览器中预览其变化。接下来，我们将添加一个比例尺标志，以便访问者可以通过地图感受到距离。
9.再次编辑脚本。这次，在mapZoom选项的后面添加一个逗号，并插入另一行代码：
$（'#map'）.goMap（{
latitude：45.53940，
longitude：-122.59025，
zoom：16，
scaleControl：true
}）；//end goMap
这行代码在地图的左下方添加了一个小小的比例尺标志。最后，我们将地图的类型（通常，GoMap显示为一张混合地图，即带有街道及其名称的卫星图）修改为仅仅是一张卫星照片。
10.最后一次编辑goMaps（）函数，添加最后一个选项：
$（'#map'）.goMap（{
latitude：45.53940，
longitude：-122.59025，
zoom：16，
scaleControl：true，
maptype：'SATELLITE'
}）；//end goMap
基本的地图现在设置好了。要强调在这个地图中已经选定的位置，我们要添加一个红色的按钮标志。
11.在前面添加的goMap（）函数的后面输入：
$.goMap.createMarker（{
latitude：45.53743，
longitude：-122.59473，
title：'hole1’
}）；//end createMarker
这就在地图中央点的位置设置了一个标志。当然，我们可以提供不同的经度和纬度值，以便在地图的其他地方添加一个标志。
最后，我们将为这个标志添加一个信息窗口。
12.编辑在最后一步中输入的代码，并添加一个信息窗口（修改的地方用粗体显示）：
$.goMap.createMarker（{
latitude：45.53743，
longitude：-122.59473，
title：'hole1’，
html：{
content：’＜h2＞Hole 1＜/h2＞＜p＞Par 4，346 yards＜/p＞’，
popup：true
}
}）；//end createMarker
这段代码添加了一个弹出窗口，其中带有一些HTML。保存这个页面，并且在Web浏览器中最后查看它一下。你可以在chapter12文件夹下看到教程文件的一个完整版本，即complete_map.html。
