通過代碼示例跟我學(xué)html5相關(guān)技術(shù)——在html5中如何獲取地理位置信息及應(yīng)用實(shí)例第1部分-閱讀頁
2024-12-04 07:39本頁面
【正文】 wGeolocationDataDivTagID39。 } } function successGeolocationPositionData(geolocationPositionObject) { /** 由于要將地圖的中心設(shè)定為用戶的地理位置數(shù)據(jù)所指示的某一特定的點(diǎn)，因此還需要?jiǎng)?chuàng) 建一個(gè) latlng 值 以保存此位置信息并將其傳遞到地圖的選項(xiàng)中，將 地址 轉(zhuǎn)變?yōu)榈乩淼攸c(diǎn)的過程叫應(yīng)用 Google 地圖 API 顯示第圖，其中的sensor=true 或者sensor =false。 */ var latLngObject = new (, )。 ?ROADMAP，用于顯示 Google Maps 默認(rèn)的普通二維圖塊。 ?HYBRID，用于同時(shí)顯示拍攝的圖塊和突出特征（道路、城市名）圖塊層。 Google Maps 和 Maps API 內(nèi)的地圖圖像被分割為地圖“ 圖塊”和“縮放級(jí)別”兩部分。 可以使用 0（最低縮放級(jí)別，在地圖上可以看到整個(gè)世界）到 19（最高縮放級(jí)別， 可以看到獨(dú)立建筑物）之間的縮放級(jí)別 */ var geolocationMapOptions = { zoom: 15, //縮放級(jí)別 center: latLngObject, //將地圖的中心設(shè) 置為指定的地理點(diǎn) scaleControl: true, //比例尺 mapTypeControl: false, navigationControlOptions: {style: }, 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 18/27 頁 18 mapTypeId: }。showGeolocationDataDivTagID39。 = 39。 = 39。 /** 創(chuàng)建新的地圖實(shí)例時(shí)，需要在網(wǎng)頁中指定一個(gè) div標(biāo)簽元素作為地圖的容器，并在此 div標(biāo)簽中顯示出相關(guān)的地圖 */ var returnResultMap = new (showGeolocationDataDivTagObject, geolocationMapOptions)。 每個(gè)標(biāo)記都是一個(gè) 對(duì)象，在實(shí)例化時(shí)需 要給定一定的配置信息，如標(biāo)記的位置。 title 表示鼠標(biāo)放到 marker 上要顯示的值。 } function errorGetGeolocationPositionData(geolocationPositionErrorObject) { (39。).innerHTML = 錯(cuò)誤編碼為： + + ，錯(cuò)誤信息為： +。 charset=gb18030 script src= type=text/javascript /script script type=text/javascript (function() { // 閉包 function load_script(xyUrl, callback) { var head = (39。)[0]。script39。 = 39。 = xyUrl。amp。 // Handle memory leak in IE 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 21/27 頁 21 = = null。amp。 } } }。 } function translate(point, type, callback) { var callbackName = 39。 + (() * 10000)。to=4amp。y= + + amp。 // 動(dòng) 態(tài)創(chuàng)建 script 標(biāo)簽 load_script(xyUrl)。 // 調(diào)用完需要?jiǎng)h除改函數(shù) var point = new (, )。amp。 } } = || {}。 = translate。 /script /head body div id=showMapDivTagID style=width:600px。 (handleSuccess, handleError, options)。 } function handleSuccess(position){ /** 獲取到當(dāng)前位置經(jīng)緯度（ google 地圖中的經(jīng)緯度） */ var currentLongitude = 。 /** 為了能夠調(diào)用百度地圖的 API 顯示出具體的位置信息，需要進(jìn)行轉(zhuǎn)換所獲得的位置信息數(shù)據(jù)。 */ var map = new (showMapDivTagID)。 /** 將 google地圖中的經(jīng)緯度轉(zhuǎn)化為百度地圖的經(jīng)緯度，其中的 centerAndZoom方法實(shí)現(xiàn) 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 23/27 頁 23 將 point 移到瀏覽器中心（設(shè)置視圖中心點(diǎn)），并且地圖大小調(diào)整為 15。 (marker)。})。 //標(biāo)注可拖拽 (point, 15)。 (new ())。 (new ())。 var infoWindow = new (信息窗口 , opts)。 // 打開信息窗口 //折線 var polyline = new ([ new (, ), new (, ), 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 24/27 頁 24 new (,)], {strokeColor:blue, strokeWeight:6, strokeOpacity:} //藍(lán)色、寬度為 6 )。 })。位置服務(wù)器拒絕 39。獲取不到位置 39。獲 取信息超時(shí) 39。 alert(errorType[]+:獲取地理位置錯(cuò)誤 ,請(qǐng)檢查您的網(wǎng)絡(luò)是否通暢 !)。 （ 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)。 ? 激活標(biāo)注的拖拽功能 ()。 ? 刪除覆蓋物 (marker)。 （ 3）在地圖中添加信息窗口 InfoWindow 相關(guān)的 API ? 在某個(gè)特定的位置創(chuàng)建一個(gè)信息窗口 var infowindow = new (內(nèi)容 ,{width:250,height:100,title:hello})。 （ 4）在地圖中添加折線 Polyline 相關(guān)的 API var polyline = new ([new (X1,Y1), new (X2,Y2), new (X3,Y3)], {strokeColor:blue, strokeWeight:6, strokeOpacity:})。 楊教授工作室 精心創(chuàng)作的優(yōu)秀程序員 職業(yè)提升必讀系列資料 楊教授工作室，版權(quán)所有，盜版必究 ， 27/27 頁 27
教學(xué)課件相關(guān)推薦
鄂ICP備17016276號(hào)-1