APP開發(fā)公司怎樣解決用戶自定義的地理定位？提供以地理位置服務(wù)的應(yīng)用程序，有時(shí)候需要用戶自主選擇當(dāng)前地理位置。深圳APP開發(fā)公司本例演示通過用戶選擇或者輸入一個(gè)地名，去獲取其地名的地理位置信息。當(dāng)用戶打開瀏覽器，點(diǎn)擊“某一個(gè)地名”標(biāo)簽，或者在“文本框”中輸入地名，然后點(diǎn)擊“定位”按鈕，網(wǎng)頁程序就會根據(jù)查找的結(jié)果顯示其地理位置信息。使用Chrome瀏覽器打開“用戶自己定義的地理定位”網(wǎng)頁文件，運(yùn)行效果如圖4.16所示。
在城市列表中點(diǎn)擊“杭州”標(biāo)簽，運(yùn)行效果如圖4.17所示。
在“文本框”中輸入“西溪濕地”，然后點(diǎn)擊“定位”按鈕，運(yùn)行效果如圖4.18所示。
利用編輯器打開“4-4.用戶自定義的地理定位.html”文件，代碼如下：
【代碼4-4】
01 < blockquote> 02 < p> 用戶 自定義 的 地理 定位</ p> 03 </ blockquote> 04 < h3> 初始化 中</ h3> 05 < div id=" mapInfo" class=" mapInfo"></ div> <!-- 坐標(biāo) 顯示 控 件 --> 06 < div class=" citylist"> 07 < p> 初始化 系統(tǒng)， 請 先 選擇 一個(gè) 地點(diǎn)</ 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 或者， 您也 可以 從 輸入 一個(gè) 地名 開始：< 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> <!-- 定位 進(jìn)度 顯示 控 件 --> 20 < div id=" map" class=" map"></ div> <!-- 地圖 顯示 控 件 --> 21 </ div>
第07～12行定義了城市列表。用戶可以從城市列表中選擇一個(gè)城市，當(dāng)用戶點(diǎn)擊城市名稱標(biāo)簽時(shí)，程序會獲取當(dāng)前點(diǎn)擊的城市名稱，根據(jù)該城市名搜索其地理位置信息，然后自動(dòng)定位到所選擇的城市。設(shè)置列表鏈接控件a的class屬性為ad，可以方便為JavaScript提供DOM查找。
第15～16行代碼設(shè)置一個(gè)文本輸入控件，用戶可以自己輸入地名或者城市名，當(dāng)用戶點(diǎn)擊“定位”按鈕時(shí)，程序會根據(jù)當(dāng)前輸入的地名定位當(dāng)前地理位置信息，如果定位失敗，則給出提示。第19～20行代碼分別設(shè)置了當(dāng)前定位的進(jìn)度提示和顯示地圖信息的控件，JavaScript部分代碼設(shè)計(jì)如下：01 // 定義 全局 變量 02 var map, // 地圖 對象 03 gLocalSearch, // Google 地圖 搜索 對象 04 address, // 用戶 自定義 定位 文本 05 mapInfo, // 顯示 地理 位置 坐標(biāo) 06 processDiv; // 定位 狀態(tài) 過程 提醒 07 function init(){ // 初始化 Google 地圖 08 map = new google. maps. Map( document. getElementById(" map"), { // Google 地圖 實(shí)例 化 09 zoom: 3, 10 center: new google. maps. LatLng( 35. 86166, 104. 195397), // 設(shè)置 默認(rèn) 中國 地圖 坐標(biāo)
11 mapTypeId: google. maps. MapTypeId. ROADMAP 12 }); 13 map. getDiv(). style. border = '1px solid #ccc'; 14 gLocalSearch = new GlocalSearch(); // 實(shí)例 化 GlocalSearch 15 gLocalSearch. setSearchCompleteCallback( null, showPosition); // 設(shè)置 搜索 結(jié)果 的 回 調(diào) 函數(shù) 16 17 } 18 function showMap( coords){ // 通過 經(jīng)緯度 顯示 地圖 19 var latLng = new google. maps. LatLng( coords. latitude, coords. longitude);// 設(shè)置 坐標(biāo) 標(biāo)記 20 var marker= new google. maps. Marker({ position: latLng, map: map }); // 在 地圖 上 顯示 標(biāo)記 21 map. setCenter( latLng); // 設(shè)置 當(dāng)前 坐標(biāo) 居中 22 map. setZoom( 15) // 設(shè)置 地圖 放大 15 倍 23 } 24 function showPosition(){ 25 var first = gLocalSearch. results[ 0]; // 獲取 第一個(gè) 搜索 結(jié)果
26 if( first){ 27 showProcess(); // 搜索 進(jìn)度 搜索 完成 28 showMap({ latitude: first. lat, longitude: first. lng}); // 顯示 地圖 29 mapInfo. html(" 經(jīng)度：" + first. lat + "<br> 緯度：" + first. lng); // 顯示 經(jīng)緯度 30 }else{ // 定位 失敗 處理 31 mapInfo. html(""); 32 showProcess(" 對不起， 找 不到 該地 點(diǎn)， 請 檢查 您的 輸入 是否 有 誤！"); 33 } 34 } 35 function showProcess( msg) // 顯示 定位 進(jìn)度 36 msg = msg || ''; 37 processDiv. html( msg); // 打印 出 當(dāng)前 進(jìn)度 38 } 39 function seach( keyword){ 40 gLocalSearch. execute( keyword); 41 } 42 $( function(){
43 var bind = function(){ // 設(shè)置 事件 綁 定 函數(shù) 44 $(". ad"). bind(" click", function( e){ // 城市 列表 標(biāo)簽 綁 定點(diǎn) 擊 事件 45 var keyword = $( this). text(); // 獲取 城市 名稱 46 showProcess(' 正在 定位 中...'); 47 seach (keyword); // 執(zhí)行 搜索 48 }); 49 $("# searchBtn"). bind(" click", function(){ // 輸入 文本 定位 事件 綁 定 50 var keyword = address. val(); 51 showProcess(' 正在 定位 中...'); 52 seach (keyword); // 執(zhí)行 搜索 53 }); 54 } 55 address = $("# address"); // 獲取 文本 框 DOM 對象 56 processDiv = $("# process") // 獲取 進(jìn)度 狀態(tài) DOM 對象 57 mapInfo = $("# mapInfo"); // 獲取 地理 位置 信息 DOM 對象 58 init();
// 程序 初始化 59 bind(); // 調(diào)用 事件 綁 定 函數(shù) 60 });
第02～06行代碼定義了5個(gè)全局變量，map和gLocalSearch這兩個(gè)變量只需要初始化一次，但在多個(gè)地方調(diào)用（在本例中showMap和search函數(shù)調(diào)用）可以把變量作用域提升，減少重復(fù)實(shí)例化次數(shù)；另外3個(gè)變量保存DOM節(jié)點(diǎn)信息，在代碼第55～57行進(jìn)行初始化，把作用域提升是為了不用重復(fù)獲取查詢開銷較大的DOM節(jié)點(diǎn)。
第07～17行代碼初始化全局變量map和gLocalSearch。地圖初始化默認(rèn)為中國。初始化gLocalSearch，指定其回調(diào)函數(shù)為showPosition。
第18～23行定義顯示地圖的函數(shù)，接收1個(gè)經(jīng)緯度信息的對象。
第24～34行定義gLocalSearch回調(diào)函數(shù)的具體實(shí)現(xiàn)，當(dāng)gLocalSearch的excute函數(shù)執(zhí)行完成時(shí)調(diào)用這個(gè)函數(shù)。
第25行通過gLocalSearch的results屬性獲取搜索結(jié)果的第1個(gè)返回值。當(dāng)定位成功時(shí)，results數(shù)組里包含了一組搜索結(jié)果，這里將獲取第1個(gè)結(jié)果，因?yàn)榈?個(gè)結(jié)果一般最精確。當(dāng)定位不成功時(shí)，results為1個(gè)空數(shù)組，有興趣可以打印出其值來，里面包含了非常豐富的地理位置信息。好了，APP開發(fā)公司本文關(guān)于“怎樣解決用戶自定義的地理定位？”的相關(guān)APP制作定位解決方案就分享到這里，謝謝關(guān)注，博納網(wǎng)絡(luò)編輯整理。
