4.3 谷歌地图的使用
本节我们着重向读者介绍谷歌地图的使用方法，包括追踪用户的位置、查找路线和用户自定义的地理定位等功能。
4.3.1 追踪用户的位置
在地图上描绘出移动路径可以清楚地表示用户的移动轨迹。本例演示用Google地图追踪用户的地理位置，根据用户的移动轨迹在Google地图上画出移动路线图。
在iPhone使用Safari浏览器打开“4-2．使用Google地图追踪用户的位置．html”网页文件，运行效果如图4.8所示。
提示
通过3G网络访问，需要通过Web服务器来访问网页文件。
图4.8 在IOS上用Safari浏览器打开
移动当前位置，行走一段距离，在移动过程中，Google地图上会画出移动轨迹，如图4.9所示。
提示
可以开车或者乘坐公交来移动当前位置，效果会更好。
图4.9 移动过程中
利用编辑器打开“4-2．使用Google地图追踪用户的位置．html”文件，代码如下：
【代码4-2】
01 <! DOCTYPE html>
02 <html lang="en">
03 <head>
04 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
05 <title>使用Google地图追踪用户的位置</title>
06 <style>
07 body{
08 margin:50px auto; width:634px; padding:20px; border:1px solid #c88e8e;
09 border-radius: 15px;
10 height: 100%; /* 设置高度自适应 */
11 }
12 #map{ height: 400px; width: 630px; text-align: center; }/* 设置地图宽高 */
13 </style>
14 </head>
15 <body>
16 <p>使用Google地图追踪用户的位置</p>
17 <p>当前地理位置<span id="info"></span></p>
18 <div id="map">加载中．..</div> <! -- 地图显示控件 -->
19 </body>
20 <script src="http://maps.google.com/maps/api/js? sensor=false"></script>
21 <script>
22 ; (function(){
23 var
24 gmap = document.getElementById("map"), // 获取地图DOM
25 ginfo = document.getElementById("info"), // 获取显示经纬度DOM
26 chinapos = new google.maps.LatLng(35.86166, 104.195397),
// 设置默认中国地图坐标
27 map = new google.maps.Map(document.getElementById("map"), {
// google地图实例化
28 zoom: 5,
29 center: chinapos,
30 mapTypeId: google.maps.MapTypeId.ROADMAP
31 }),
32 marker = new google.maps.Marker({position: chinapos, map: map, title:
"用户位置"}), // 地图浮动提示
33 watchMap = function(position) {
34 var
35 pos = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude); // 经纬度
36 ginfo.innerHTML = "当前位置（纬度：" + position.coords.latitude
37 + "，经度：" + position.coords.longitude + "）"; // 显示定位结果
38 map.setCenter(pos);
39 map.setZoom(14);
40 marker.setPosition(pos); // 更新位置标记
41 drawPath(position.coords); // 根据当前经纬度画线
42 },
43 drawPath = function(){ // 画线函数
44 var
45 coordinatesPathArray = [], // 所监听到的所有经纬度信息
46 lineOption = { // 画线的配置选项
47 strokeColor: "#9290f8", // 线的颜色
48 strokeOpacity: 0.5, // 线的透明度
49 strokeWeight: 5 // 线的精细
50 },
51 coordsPath; // 保存Polyline的变量
52 var draw = function(coords){ // 重绘函数
53 coordsPath.setMap(null); // 清除原有的线
54 // 把新的位置信息加入到数组中
55 coordinatesPathArray.push(new google.maps.LatLng(coords.latitude,
coords.longitude));
56 lineOption.path = coordinatesPathArray; // 线的path配置选项
57 coordsPath = new google.maps.Polyline(lineOption);
// 利用Google API画线
58 coordsPath.setMap(map); // 在地图上显示出线
59 }
60 lineOption.path = coordinatesPathArray; // 初始化第一条线
61 coordsPath = new google.maps.Polyline(lineOption);
// 初始化Polyline并赋值给coordsPath
62 return draw;
63 }(),
64 updatePosition = function(){
65 var
66 errorHandler = function(error){ // 定位出错处理函数
67 switch(error.code){
68 case error.PERMISSION_DENIED: // 定位失败，没有权限
69 gmap.innerHTML = "定位被阻止，请检查您的授权或者网络协议（" +
error.message + ")";
70 break;
71 case error.POSITION_UNAVAILABLE: // 定位失败，不可达
72 gmap.innerHTML = "定位暂时无法使用，请检查您的网络(" +
error.message + ")";
73 break;
74 case error.TIMEOUT: // 定位失败，超时
75 gmap.innerHTML = "对不起，定位超时"; // 超时了
76 break;
77 }
78 },
79 getWatchPosition = function(){ // 定位函数
80 var watchId = navigator.geolocation.watchPosition(watchMap,
errorHandler, {timeout: 1000});
81 };
82 return getWatchPosition; // 返回定位函数供外部调用
83 }();
84 if (navigator.geolocation) {
85 gmap.innerHTML = "定位中．..";
86 updatePosition(); // 定位开始
87 } else {
88 gmap.innerHTML = ’您的浏览器不支持地理位置’; // 定位失败，浏览器不支持
89 }
90 }());
91 </script>
92 </html>
代码第86行是本例的入口函数，该函数调用getWatchPosition方法，然后执行navigation.geolocation对象的watchPosition方法。
第80行调用HTML 5 Geolocation API的watchPosition函数，有3个参数，这3个参数和getCurrentPostion含义一样，区别在于watchPosition函数是一个监视器，监视用户的位置是否发生变化，如果发生变化，浏览器就会触发其回调函数，成功则回调函数watchMap，失败则回调函数errorHandler。
第40行的作用是在用户移动过程中重新标记用户的当前位置。
第41行调用画线程序。Google提供的画线API Polyline会在2点间画出1条直线。根据用户频繁的位置移动形成多个点，连接每个点，形成一条直线。
第43～63行是画线函数。首先把画线的变量保存在闭包中，注意第61行代码，该函数会在页面载入时立即执行，并初始化coordinatesPathArray、lineOption、coordsPath这3个变量，第62行返回draw函数。
第52～59行定义真正的画线函数draw，第40行调用的drawPath函数实际上调用的是drawp函数。传递的参数为当前的坐标。draw函数的原理是先清除原先已经画的轨迹，再把当前的位置坐标加入到历史坐标数组coordinatesPathArray中，最后根据新的数组在Google Map上重新绘制一条轨迹。
第53行清除当前地图上已经画好的路径轨迹。
第54行把当前位置坐标加入到coordinatesPathArray数组中。
第55～57行把当前新的位置坐标数组在Google Map上重新绘制出来。
提示
更多关于通过Google Map画线的知识点，请参考谷歌官方网址
https://developers.google.com/maps/documentation/javascript/reference#Polyline。
4.3.2 查找路线
本例演示一个生活中经常用到的场景，根据Google地图查找出行路线。路线查找需要提供起始位置和目的地位置。利用HTML 5提供的获取地理位置信息，可以非常方便地定位到当前地理位置，然后提供目的地，就可以根据Google地图API查找出行路线。本例演示的路线查找功能也可以选择出行方式，包括自驾车、公交、步行、自行车4种方式。
使用Chrome浏览器打开“4-3．使用Google地图查找路线．html”网页文件，运行效果如图4.10所示。
图4.10 查找路线页面
在“起始位置”一栏点击“使用当前位置作为起始位置”文字，运行效果如图4.11所示。
图4.11 点击使用当前位置作为起始位置
在“结束位置”一栏填写“西溪国家湿地公园”，选择“出行方案”为“公交”，然后点击“查找”按钮，运行效果如图4.12所示。图中左侧以地图形式显示查找结果，标签A代表起始位置，标签B代表结束位置，图中右侧以文字的形式显示具体的路线信息。
图4.12 查找去西溪国家湿地公园的路线
设置“出行方案”为“驾车”，然后点击“查找”按钮，运行效果如图4.13所示。
图4.13 驾车路线
设置“出行方案”为“自行车”，然后点击“查找”按钮，运行效果如图4.14所示。
图4.14 自行车路线
提示
没有找到自行车路线，因为Google地图目前只有美国地区支持自行车路线。
设置出行方案为“步行”，然后点击“查找”按钮，运行效果如图4.15所示。
图4.15 步行路线
利用编辑器打开“4-3．使用Google地图查找路线．html”文件，样式部分代码如下：
【代码4-3】
<style>
body{
margin:50px auto; width:870px; padding:20px; border:1px solid #c88e8e;
border-radius: 15px;
height: 100%; /* 设置高度自适应 */
}
.item { width:430px; display: inline-block; padding-right:2px; }
/* 设置ip和wifi容器的宽度并左浮动 */
.section{padding: 5px; }
.btn{text-decoration: none; color: #c89191; font-size: 11px; }
.btn:hover{text-decoration: underline; }
input, select{border: #b9aaaa 1px solid; height: 22px; width: 200px; margin
left:5px; }
#map{ height: 400px; width: 430px; text-align: center; } /* 设置地图宽高 */
.search{ /* 设置查找按钮样式 */
padding: 4px 12px;
text-decoration: none;
cursor: pointer; /* 设置光标的手形 */
color: #333333;
background-color: #f5f5f5; /* 设置查找按钮背景色 */
border-radius: 4px;
box-shadow: inset 0 1px 0 rgba(255,255,255, .2), 0 1px 2px rgba(0,0,0, .05);
/* 设置查找按钮阴影 */
}
</style>
HTML部分代码如下：
01 <p>查找路线<span id="info"></span></p>
02 <div class="section"> <! —起始位置 -->
03 <label for="start">起始位置</label><input type="text" id="origin" />
<! —起始位置输入框—>
04 <a href="javascript:; " class="btn" id="user-origin">使用当前位置作为起始
位置</a>
05 </div>
06 <div class="section"> <! —结束位置 -->
07 <label for="end">结束位置</label><input type="text"
id="destination" /> <! —结束位置输入框 -->
08 <a href="javascript:; " class="btn" id="user-destination">使用当前位
置作为结束位置</a>
09 </div>
10 <div class="section">
11 <label for="travelMode">出行方案</label> <! —出行方案选择-->
12 <select id="travelMode">
13 <option value="TRANSIT">公交</option> <! —选择公交-->
14 <option value="DRIVING">驾车</option> <! —选择驾车-->
15 <option value="BICYCLING">自行车</option> <! —选择自行车-->
16 <option value="WALKING">步行</option> <! —选择步行-->
17 </select>
18 <a href="javascript:; " class="search" id="search">查找</a><! —查找路
线按钮-->
19 </div>
20 <div id="map" class="item">加载中．..</div> <! --地图方式显示控件-->
21 <div id="directionsPanel" class="item"></div> <! —文字方式显示路线-->
第03行和第07行设计的输入框可以让用户自己输入路线查找的起始位置或者结束位置。
第04行和第08行定义用户可以选择以当前位置作为起始或者结束位置。
第12～17行定义了4种出行方式，分别为：
● TRANSIT：公交。
● DRIVING：驾车。
● BICYCLING：自行车。
● WALKING：步行。
第21行<div id="directionsPannel">元素的作用是把路线查找的文字结果显示在这里。
JavaScript逻辑代码部分如下：
01 var
02 gmap = document.querySelector("#map"), // 获取地图DOM
03 ginfo = document.querySelector("#info"), // 获取显示经纬度DOM
04 origin = document.querySelector("#origin"), // 获取起始位置输入DOM
05 destination = document.querySelector("#destination"), // 获取结束位置输入DOM
06 userOrigin = document.querySelector("#user-origin"),
// 获取使用当前作为起始位置DOM
07 userDestination = document.querySelector("#user-destination"),
// 获取使用当前作为结束位置DOM
08 travelMode = document.querySelector("#travelMode"), // 获取出行方式DOM
09 search = document.querySelector("#search"), // 获取查找按钮DOM
10 directionsPanel = document.querySelector("#directionsPanel"),
// 获取文字结果DOM
11 map, // 定义Google地图变量
12 currentMaker, // 定义当前位置标记
13 currentPosition, // 定义当前位置信息
14 directionsService=new google.maps.DirectionsService(), // 初始化获取路线服务
15 directionsDisplay = new google.maps.DirectionsRenderer(), // 初始化显示路线服务
16 showMap = function(position) {
17 currentPosition = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude); // 经纬度
18 // 地图参数
19 var options = { zoom: 14, center: currentPosition, mapTypeId:
google.maps.MapTypeId.ROADMAP };
20 map = new google.maps.Map(gmap, options), // 地图
21 // 地图位置标记
22 currentMaker = new google.maps.Marker({position: currentPosition, map:
map, title: "用户位置"});
23 ginfo.innerHTML = "{ 当前位置（纬度：" + position.coords.latitude
24 + "，经度：" + position.coords.longitude + "）}"; // 显示定位结果
25 directionsDisplay.setMap(map); // 地图上显示路线
26 directionsDisplay.setPanel(directionsPanel); // 显示路线查找文字结果
27 },
28 userSelectionCurrent = function(e){ // 设置当前位置作为查找点
29 var prev = this.previousElementSibling; // 获取input元素
30 prev.value = ’我的位置’; // 设置input元素的值
31 prev.style.color = 'blue'; // input元素字体设置为蓝色
32 prev.isCurrent = true; // 设置input使用当前位置来计算
33 },
34 cancelCurrent = function(){
35 this.style.color = '#111'; // 设置input元素字体颜色为#111
36 this.isCurrent = false; // 设置不使用当前位置作为查找点
37 },
38 bind = function(){
39 [userOrigin, userDestination].forEach( function (item){
40 item.addEventListener('click', userSelectionCurrent, false);
// 绑定使用当前位置的点击事件
41 // 如果input元素的值是人为改变的，就设置不使用当前位置作为查找点
42 item.previousElementSibling.addEventListener('change', cancelCurrent,
false);
43 });
44 search.addEventListener("click", calcRoute, false); // 绑定查找按钮事件
45 },
46 calcRoute = function(){ // 路线查找函数
47 var
48 start = origin.isCurrent ? currentPosition : origin.value,
// 获取路线的起始位置
49 end = destination.isCurrent ? currentPosition : destination.value,
// 获取路线的结束位置
50 selectedMode = travelMode.value, // 获取路线的出行方式
51 request = { // 封装route函数参数
52 origin:start,
53 destination:end,
54 travelMode: google.maps.TravelMode[selectedMode]
55 };
56 // 调用Google地图API请求路线
57 directionsService.route(request, function(response, status) {
58 if (status == google.maps.DirectionsStatus.OK) { // 找到路线
59 directionsPanel.innerHTML = ''; // 清除文字结果
60 directionsPanel.style.color = ''; // 清除文字结果颜色
61 directionsDisplay.setMap(map); // 在地图上显示路线
62 directionsDisplay.setDirections(response); // 显示文字结果
63 currentMaker.setMap(null); // 清除位置标记
64 }else{
65 directionsPanel.style.color = 'red';
66 // 没有找到路线
67 if(status === google.maps.DirectionsStatus.ZERO_RESULTS){
68 // 自行车查找的特殊处理
69 if(selectedMode === 'BICYCLING'){
70 directionsPanel.innerHTML =’没有找到路线，可能是不支持当前国家’;
71 }else{
72 directionsPanel.innerHTML = ’没有找到相关路线’;
73 }
74 }else if(status == google.maps.DirectionsStatus.NOT_FOUND){
75 directionsPanel.innerHTML = ’地址没有找到’;
76 }else{
77 directionsPanel.innerHTML = ’其他错误：' + status;
78 }
79 directionsDisplay.setMap(null); // 清除上一次显示的路线
80 currentMaker.setMap(map); // 显示当前的位置标记
81 }
82 });
83 },
84 getPosition = function(){
85 var
86 errorHandler = function(error){ // 定位出错处理函数
87 switch(error.code){
88 case error.PERMISSION_DENIED: // 定位失败，没有权限
89 gmap.innerHTML = "定位被阻止，请检查您的授权或者网络协议（" +
error.message + ")";
90 break;
91 case error.POSITION_UNAVAILABLE: // 定位失败，不可达
92 gmap.innerHTML = "定位暂时无法使用，请检查您的网络(" +
error.message + ")";
93 break;
94 case error.TIMEOUT: // 定位失败，超时
95 gmap.innerHTML = "您的网络较慢，请耐心等待．..";
96 gmap.innerHTML = "对不起，定位超时"; // 超时了
97 break;
98 }
99 },
100 getCurrentPosition = function(){ // 定位函数
101 navigator.geolocation.getCurrentPosition(showMap, errorHandler);
102 };
103 return getCurrentPosition; // 返回定位函数供外部调用
104 }();
105 var init = function(){
106 if (navigator.geolocation) {
107 gmap.innerHTML = "定位中．..";
108 getPosition(); // 定位开始
109 bind();
110 } else {
111 gmap.innerHTML = ’您的浏览器不支持地理位置’; // 定位失败，浏览器不支持
112 }
113 };
114 google.maps.event.addDomListener(window, 'load', init); // 入口函数
第17行在navigator.geolocation.getCurrentPosition函数的回调结果中用currentPosition记录定位的结果。如果是使用当前位置查找路线，那么这个结果在执行路线查找时会用到。
第28～33行定义“使用当前位置作为起始位置”和“使用当前位置作为结束位置”的事件处理函数，当用户点击按钮时，设置其对应的文本输入框的值为“我的位置”，并把字体颜色改为蓝色。然后设置变量isCurrent的值为true，用来标记要使用当前位置作为起始或者结束位置。
第34～37行取消使用当前位置作为查找条件。
提示
当用户在输入框中输入文字时，表示用户不想使用当前位置来查找。
第38～45行定义了“使用当前位置作为起始位置”“使用当前位置作为结束位置”2个文本输入框和“查找”按钮的事件代理。
第46～83行是查找路线的处理函数。
第48～49行获取路线查找的起始和结束位置。如果使用当前位置，那么其值为第17行代码赋予变量currentPostion的值；如果不使用当前位置作为查找条件，就对应获取用户输入的文字。
第50行获取用户选择的出行方式。
第57行调用directionsService的route方法。该方法提供两个参数，第1个参数为查找条件（包括路线的起始、结束位置和出行方式等），第2个参数为查找结果的回调函数。回调函数中第一个参数是具体的路线结果，第2个参数代表查找结果的状态。
提示
要了解更多谷歌地图相关的查找路线的信息接口，读者可以参考
https://developers.google.com/maps/documentation/javascript/reference#DirectionsService。
第58行表示已经查找到了结果。
第61行表示如果找到路线，就在地图上显示出路线。
第62行在<div id="directionsPanel">上显示查找结果的文字方案。
第65～78行是没有正确查找到路线的错误处理逻辑。常见的有以下3种错误：
● OK：找到路线。
● NOT_FOUND：起点和终点中至少有一个位置没找到。
● ZERO_RESULT：起点和终点都找到了，但没有找到相关路线。
第114行表示Google地图可用后马上调用init函数进行初始化。
4.3.3 用户自定义的地理定位
提供以地理位置服务的应用程序，有时候需要用户自主选择当前地理位置。本例演示通过用户选择或者输入一个地名，去获取其地名的地理位置信息。当用户打开浏览器，点击“某一个地名”标签，或者在“文本框”中输入地名，然后点击“定位”按钮，网页程序就会根据查找的结果显示其地理位置信息。
使用Chrome浏览器打开“用户自己定义的地理定位”网页文件，运行效果如图4.16所示。
图4.16 打开网页文件
在城市列表中点击“杭州”标签，运行效果如图4.17所示。
图4.17 IP使用联通3G网络定位
在“文本框”中输入“西溪湿地”，然后点击“定位”按钮，运行效果如图4.18所示。
图4.18 用户自己输入的定位结果
利用编辑器打开“4-4．用户自定义的地理定位．html”文件，代码如下：
【代码4-4】
01 <blockquote>
02 <p>用户自定义的地理定位</p>
03 </blockquote>
04 <h3>初始化中</h3>
05 <div id="mapInfo" class="mapInfo"></div> <! -- 坐标显示控件 -->
06 <div class="citylist">
07 <p>初始化系统，请先选择一个地点</p>
08 <a href="javascript:; " title="北京" class="ad">北京</a>
09 <a href="javascript:; " title="上海" class="ad">上海</a>
10 <a href="javascript:; " title="杭州" class="ad">杭州</a>
11 <a href="javascript:; " title="成都" class="ad">成都</a>
12 <a href="javascript:; " title="深圳" class="ad">深圳</a>
13 ...
14 <br><br>
15 或者，您也可以从输入一个地名开始：<input type="text" name="address"
id="address" />
16 <button class="btn btn-mini" href="javascript:; " id="searchBtn">定位
</button>
17 </div>
18 <div class="item">
19 <div id="process"></div> <! -- 定位进度显示控件 -->
20 <div id="map" class="map"></div> <! -- 地图显示控件 -->
21 </div>
第07～12行定义了城市列表。用户可以从城市列表中选择一个城市，当用户点击城市名称标签时，程序会获取当前点击的城市名称，根据该城市名搜索其地理位置信息，然后自动定位到所选择的城市。设置列表链接控件a的class属性为ad，可以方便为JavaScript提供DOM查找。
第15～16行代码设置一个文本输入控件，用户可以自己输入地名或者城市名，当用户点击“定位”按钮时，程序会根据当前输入的地名定位当前地理位置信息，如果定位失败，则给出提示。
第19～20行代码分别设置了当前定位的进度提示和显示地图信息的控件，JavaScript部分代码设计如下：
01 // 定义全局变量
02 var map, // 地图对象
03 gLocalSearch, // Google地图搜索对象
04 address, // 用户自定义定位文本
05 mapInfo, // 显示地理位置坐标
06 processDiv; // 定位状态过程提醒
07 function init(){ // 初始化Google地图
08 map = new google.maps.Map(document.getElementById("map"), {
// Google地图实例化
09 zoom: 3,
10 center: new google.maps.LatLng(35.86166, 104.195397),
// 设置默认中国地图坐标
11 mapTypeId: google.maps.MapTypeId.ROADMAP
12 });
13 map.getDiv().style.border = '1px solid #ccc';
14 gLocalSearch = new GlocalSearch(); // 实例化GlocalSearch
15 gLocalSearch.setSearchCompleteCallback(null, showPosition);
// 设置搜索结果的回调函数
16
17 }
18 function showMap(coords){ // 通过经纬度显示地图
19 var latLng = new google.maps.LatLng(coords.latitude,
coords.longitude); // 设置坐标标记
20 var marker=new google.maps.Marker({ position: latLng, map: map });
// 在地图上显示标记
21 map.setCenter(latLng); // 设置当前坐标居中
22 map.setZoom(15) // 设置地图放大15倍
23 }
24 function showPosition(){
25 var first = gLocalSearch.results[0]; // 获取第一个搜索结果
26 if(first){
27 showProcess(); // 搜索进度搜索完成
28 showMap({latitude: first.lat, longitude: first.lng});
// 显示地图
29 mapInfo.html("经度：" + first.lat + "<br>纬度：" + first.lng);
// 显示经纬度
30 }else{ // 定位失败处理
31 mapInfo.html("");
32 showProcess("对不起，找不到该地点，请检查您的输入是否有误！");
33 }
34 }
35 function showProcess(msg) // 显示定位进度
36 msg = msg || '';
37 processDiv.html(msg); // 打印出当前进度
38 }
39 function seach(keyword){
40 gLocalSearch.execute(keyword);
41 }
42 $(function(){
43 var bind = function(){ // 设置事件绑定函数
44 $(".ad").bind("click", function(e){ // 城市列表标签绑定点击事件
45 var keyword = $(this).text(); // 获取城市名称
46 showProcess(’正在定位中．..');
47 seach (keyword); // 执行搜索
48 });
49 $("#searchBtn").bind("click", function(){ // 输入文本定位事件绑定
50 var keyword = address.val();
51 showProcess(’正在定位中．..');
52 seach (keyword); // 执行搜索
53 });
54 }
55 address = $("#address"); // 获取文本框DOM对象
56 processDiv = $("#process") // 获取进度状态DOM对象
57 mapInfo = $("#mapInfo"); // 获取地理位置信息DOM对象
58 init(); // 程序初始化
59 bind(); // 调用事件绑定函数
60 });
第02～06行代码定义了5个全局变量，map和gLocalSearch这两个变量只需要初始化一次，但在多个地方调用（在本例中showMap和search函数调用）可以把变量作用域提升，减少重复实例化次数；另外3个变量保存DOM节点信息，在代码第55～57行进行初始化，把作用域提升是为了不用重复获取查询开销较大的DOM节点。
第07～17行代码初始化全局变量map和gLocalSearch。地图初始化默认为中国。初始化gLocalSearch，指定其回调函数为showPosition。
提示
gLocalSearch是Google Map V3提供的地图搜索API，详细的使用说明请参考网址https://developers.google.com/maps/documentation/localsearch/。
第18～23行定义显示地图的函数，接收1个经纬度信息的对象。
第24～34行定义gLocalSearch回调函数的具体实现，当gLocalSearch的excute函数执行完成时调用这个函数。
第25行通过gLocalSearch的results属性获取搜索结果的第1个返回值。当定位成功时，results数组里包含了一组搜索结果，这里将获取第1个结果，因为第1个结果一般最精确。当定位不成功时，results为1个空数组，有兴趣的读者可以打印出其值来，里面包含了非常丰富的地理位置信息。