- 構建移動網站與APP：HTML 5移動開發入門與實戰（跨平臺移動開發叢書）
- 常新峰
- 5772字
- 2020-11-29 00:14:09
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個空數組，有興趣的讀者可以打印出其值來，里面包含了非常豐富的地理位置信息。
- Embedded Linux Projects Using Yocto Project Cookbook
- Raspberry Pi for Python Programmers Cookbook（Second Edition）
- R語言數據分析從入門到精通
- Learning Chef
- Web Development with Django Cookbook
- Python Tools for Visual Studio
- Functional Programming in JavaScript
- Mastering Kali Linux for Web Penetration Testing
- Java Web程序設計任務教程
- Getting Started with Greenplum for Big Data Analytics
- ExtJS高級程序設計
- Android系統原理及開發要點詳解
- Mastering ROS for Robotics Programming
- Python3.5從零開始學
- Visual Studio Code 權威指南