通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——在html5中如何獲取地理位置信息及應(yīng)用實例第1部分-資料下載頁
2024-11-14 07:39本頁面
【導(dǎo)讀】用戶提供附近餐館的特色菜及其價格和評論等信息。當(dāng)前地理位置，瀏覽器會提示用戶是“允許”or“拒絕”。須小心地處理、存儲和重傳。如果用戶沒有授權(quán)應(yīng)用系統(tǒng)存儲這些敏感數(shù)據(jù)，那么應(yīng)用程。序應(yīng)該在相應(yīng)任務(wù)完成后立即刪除它。如果要重傳位置數(shù)據(jù)，建議對其進行加密。持地理定位功能的底層設(shè)備提供給瀏覽器的。經(jīng)度坐標(biāo)和一些其他元數(shù)據(jù)組成。Geolocation是對象中新增加的成員屬性。級），而且運算代價大。定位時間長，耗電量大；室內(nèi)效果差；需要額外硬件設(shè)備支持。但由于各個瀏覽器對該技術(shù)的支。器或安裝插件來增強現(xiàn)有瀏覽器功能。方式：十進制格式（例如）和DMS格式（例如39°覽器被鎖定，因此將該參數(shù)采用異步方式接收實際的位置信息。該回調(diào)函數(shù)只接受。3)onError是返回獲取地理位置失敗時將要完成什么的事件響應(yīng)回調(diào)函數(shù)；可選屬性oprtions主要有如下三種值，它們?yōu)槭褂肑SON對象表示的可選參數(shù)。
【正文】 of appendChild to circumvent an IE6 bug. (script, )。 } function translate(point, type, callback) { var callbackName = 39。cbk_39。 + (() * 10000)。 // 隨機函數(shù)名 var xyUrl = + type + amp。to=4amp。x= + + amp。y= + + amp。callback=. + callbackName。 // 動 態(tài)創(chuàng)建 script 標(biāo)簽 load_script(xyUrl)。 [callbackName] = function(xyResult) { delete [callbackName]。 // 調(diào)用完需要刪除改函數(shù) var point = new (, )。 callback amp。amp。 callback(point)。 } } = || {}。 = {}。 = translate。 })()。 /script /head body div id=showMapDivTagID style=width:600px。 height:400px 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 22/27 頁 22 /div /body script type=text/javascript if () { var options = { enableHighAccuracy: true, }。 (handleSuccess, handleError, options)。 } else { alert(瀏覽器不支持 html5 來獲取地理位置信息 )。 } function handleSuccess(position){ /** 獲取到當(dāng)前位置經(jīng)緯度（ google 地圖中的經(jīng)緯度） */ var currentLongitude = 。 var currentLatitude = 。 /** 為了能夠調(diào)用百度地圖的 API 顯示出具體的位置信息，需要進行轉(zhuǎn)換所獲得的位置信息數(shù)據(jù)。 在名稱 ID 為 showMapDivTagID 標(biāo)簽容器中創(chuàng)建一個地圖 ,參數(shù) showMapDivTagID 為某個div標(biāo)簽的 id 屬性。 */ var map = new (showMapDivTagID)。 var currentPositionPoint = new (currentLongitude, currentLatitude)。 /** 將 google地圖中的經(jīng)緯度轉(zhuǎn)化為百度地圖的經(jīng)緯度，其中的 centerAndZoom方法實現(xiàn) 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 23/27 頁 23 將 point 移到瀏覽器中心（設(shè)置視圖中心點），并且地圖大小調(diào)整為 15。 */ (currentPositionPoint, 2, function(point){ var marker = new (point)。 (marker)。 (click,function(){ //點擊標(biāo)注時出發(fā)事件 alert(您點擊了標(biāo)注 )。})。 ()。 //標(biāo)注可拖拽 (point, 15)。 (new ())。 (new ())。 (new ())。 (new ())。 //創(chuàng)建信息窗口 var opts = { width : 50, // 信息窗口寬度 height: 50, // 信息窗口高度 title : 您在這！ // 信息窗口標(biāo)題 }。 var infoWindow = new (信息窗口 , opts)。 // 創(chuàng)建信息窗口對象 (infoWindow, ())。 // 打開信息窗口 //折線 var polyline = new ([ new (, ), new (, ), 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 24/27 頁 24 new (,)], {strokeColor:blue, strokeWeight:6, strokeOpacity:} //藍色、寬度為 6 )。 (polyline)。 })。 } function handleError(error){ var errorType= {1:39。位置服務(wù)器拒絕 39。, 2:39。獲取不到位置 39。, 3:39。獲 取信息超時 39。}。 alert(errorType[]+:獲取地理位置錯誤 ,請檢查您的網(wǎng)絡(luò)是否通暢 !)。 } /script /html （ 3）示例代碼在 IE9 中的執(zhí)行結(jié)果 （ 4）在 Google 的 Chrome 瀏覽器中執(zhí)行 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 25/27 頁 25 編程控制百度地圖的顯示方式 在上面的示例中出現(xiàn)了許多對“百度地圖”的控制方式的控件 API，下面加以詳細(xì)說明。 （ 1）在地圖中添加附加的控件 1) NavigationControl：縮放地圖的控件，默認(rèn) 在左上角； 2) OverviewMapControl：地圖的縮略圖的控件，默認(rèn)在右下方； 3) ScaleControl：地圖顯示比例的控件，默認(rèn)在左下方； 4) MapTypeControl：地圖類型控件，默認(rèn)在右上方； （ 2）在地圖中添加標(biāo)注 Marker 相關(guān)的 API ? 在 point 處添加標(biāo)注 var marker = new (point)。 ? 添加覆蓋物 (marker)。 ? 激活標(biāo)注的拖拽功能 ()。 ? 為標(biāo)注添加事件 (名稱 ,function(){ //點擊標(biāo)注后的事件 })。 ? 刪除覆蓋物 (marker)。 ? 銷毀標(biāo)注 ()。 （ 3）在地圖中添加信息窗口 InfoWindow 相關(guān)的 API ? 在某個特定的位置創(chuàng)建一個信息窗口 var infowindow = new (內(nèi)容 ,{width:250,height:100,title:hello})。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 26/27 頁 26 ? 在 地圖中央打開信息窗口 (infoWindow,())。 （ 4）在地圖中添加折線 Polyline 相關(guān)的 API var polyline = new ([new (X1,Y1), new (X2,Y2), new (X3,Y3)], {strokeColor:blue, strokeWeight:6, strokeOpacity:})。 (polyline)。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 27/27 頁 27
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號-1