首頁 > 開發者 > 網站開發

html5定位並在百度地圖上顯示

來源：互聯網
上載者：User
創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：style   class   blog   code   java   http   

在開發移動端 web 或者webapp時，使用百度地圖 API 的過程中，經常需要通過手機定位擷取當前位置並在地圖上置中顯示出來，這就需要用到html5的地理定位功能。

navigator.geolocation.getCurrentPosition(callback);

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

var map = new BMap.Map("mapDiv");//mapDiv為放地圖的 div 的 idmap.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl());map.centerAndZoom(point, 15);//point為座標點，15為地圖縮放層級，最大層級是 18var 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(gpsPoint, 0, callback); 
//gpsPoint：轉換前座標，第二個參數為轉換方法，0表示gps座標轉換成百度座標，callback回呼函數，參數為新座標點

例子的詳細代碼如下：（引用中的ak是申請的key）

<!DOCTYPE html><html lang="zh-cn">    <head>        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />        <title></title>        <style type="text/css">            *{                height: 100%;  //設定高度，不然會顯示不出來            }        </style>                <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>        <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=··············"></script>        <script type="text/javascript" src="http://developer.baidu.com/map/jsdemo/demo/convertor.js"></script>        <script>            $(function(){                navigator.geolocation.getCurrentPosition(translatePoint);   //定位            });            function translatePoint(position){                var currentLat = position.coords.latitude;                var currentLon = position.coords.longitude;                var gpsPoint = new BMap.Point(currentLon, currentLat);                BMap.Convertor.translate(gpsPoint, 0, initMap);    //轉換座標            }            function initMap(point){                //初始化地圖                map = new BMap.Map("map");                map.addControl(new BMap.NavigationControl());                map.addControl(new BMap.ScaleControl());                map.addControl(new BMap.OverviewMapControl());                map.centerAndZoom(point, 15);                map.addOverlay(new BMap.Marker(point))            }        </script>    </head>    <body>        <div id="map"></div>    </body></html>

 

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

聯繫我們

該頁面正文內容均來源於網絡整理，並不代表阿里雲官方的觀點，該頁面所提到的產品和服務也與阿里云無關，如果該頁面內容對您造成了困擾，歡迎寫郵件給我們，收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容，歡迎發送郵件至： info-contact@alibabacloud.com 進行舉報並提供相關證據，工作人員會在 5 個工作天內聯絡您，一經查實，本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

    Open a Ticket

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

    Learn More