首頁 web前端 H5教程 html5定位並在百度地圖上顯示的範例_html5教學技巧

html5定位並在百度地圖上顯示的範例_html5教學技巧

May 16, 2016 pm 03:48 PM
百度地圖

在開發行動端 web 或webapp時,使用百度地圖 API 的過程中,經常需要透過手機定位來取得目前位置並在地圖上居中顯示出來,這就需要用到html5的地理定位功能。


複製程式碼
程式碼如下:

navigator.gegeyge;

在取得座標成功之後會執行回呼函數 callback; callback 方法的參數就是取得到的座標點;然後可以初始化地圖,設定控制項、中心點、縮放等級,然後在地圖中加入point的overlay:


複製程式碼
程式碼如下:

var map = new BMap." mapDiv");//mapDiv為放置地圖的div 的id
map.addControl(new BMap.NavigationControl());
map.addControl(new BMap.ScaleControl());
map.addControl (new BMap.OverviewMapControl());
map.centerAndZoom(point, 15);//point為坐標點,15為地圖縮放級別,最大級別是18
var pointMarker = new BMap.Marker(point );
map.addOverlay(pointMarker);

然而事實上這樣還不夠,顯示出來的結果並不准,這是因為getCurrentPosition 獲取到的坐標是GPS 經緯度坐標,而百度地圖的坐標是經過特殊轉換的,所以,在獲取定位坐標和初始化地圖之間需要進行一步座標轉換工作,該轉換方法百度API裡面已經提供了,轉換一個點或者批量裝換的方法均有提供:單點轉換需引用http://developer.baidu.com/map/ jsdemo/demo/convertor.js,批次轉換需引用http://developer.baidu.com/map/jsdemo/demo/changeMore.js,這裡只需要前者:


複製程式碼
程式碼如下:

BMap.Convertor.translate(gvertorPoint.translate00 , callback);
//gpsPoint:轉換前座標,第二個參數為轉換方法,0表示gps座標轉換成百度座標,callback回呼函數,參數為新座標點

範例的詳細程式碼如下:(引用中的ak是申請的key)


複製代碼
代碼如下:

br />











<script><br /> $(function(){<br /> navigator.geolocation.getCurrentPosition(translatePoint); //定位<br /> });<br /> function translatePoint( position){<br /> var currentLat = position.coords.latitude;<br /> var currentLon = position.coords.longitude;<br /> var gpsPoint = new BMap.Point(currentLon, currentLat);<ver. translate(gpsPoint, 0, initMap); //轉換座標<br /> }<br /> function initMap(point){<br /> //初始化地圖<br /> map = new BMap.Map("map");<br /> map.addControl(new BMap.NavigationControl());<br /> map.addControl(new BMap.ScaleControl());<br /> map.addControl(new BMap.OverviewMapControl());<br /> map.centerAndZoom( point, 15);<br /> map.addOverlay(new BMap.Marker(point))<br /> }<br /> </script>




本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

兩個點博物館:邦格荒地地點指南
4 週前 By 尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

百度地圖搭計程車如何支付 搭計程車的付款步驟介紹 百度地圖搭計程車如何支付 搭計程車的付款步驟介紹 Mar 13, 2024 am 10:04 AM

百度地圖搭計程車如何支付 搭計程車的付款步驟介紹

《百度地圖》如何新增地點 《百度地圖》如何新增地點 Mar 20, 2024 pm 01:46 PM

《百度地圖》如何新增地點

百度地圖3d實景地圖怎麼看 百度地圖3d實景地圖怎麼看 Feb 23, 2024 pm 12:52 PM

百度地圖3d實景地圖怎麼看

百度地圖車道級導航覆蓋全國200城,提升駕駛體驗 百度地圖車道級導航覆蓋全國200城,提升駕駛體驗 Feb 03, 2024 pm 03:05 PM

百度地圖車道級導航覆蓋全國200城,提升駕駛體驗

百度地圖怎麼看3d即時街景 查看3d即時街景的方法 百度地圖怎麼看3d即時街景 查看3d即時街景的方法 Mar 28, 2024 pm 03:20 PM

百度地圖怎麼看3d即時街景 查看3d即時街景的方法

《百度地圖》叫計程車怎麼付費 《百度地圖》叫計程車怎麼付費 Mar 26, 2024 pm 09:20 PM

《百度地圖》叫計程車怎麼付費

摩爾線程與百度地圖簽訂策略合作,共創全新一代數位孿生地圖 摩爾線程與百度地圖簽訂策略合作,共創全新一代數位孿生地圖 Jul 25, 2024 am 12:31 AM

摩爾線程與百度地圖簽訂策略合作,共創全新一代數位孿生地圖

百度地圖怎麼標記多個地點 標記多個地點方法 百度地圖怎麼標記多個地點 標記多個地點方法 Mar 15, 2024 pm 04:28 PM

百度地圖怎麼標記多個地點 標記多個地點方法

See all articles