【前端】【H5 API】地理定位（獲取經緯度）
阿新 • • 發佈：2022-03-15
H5 API 地理定位
地理定位在日常生活中應用比較廣泛，例如，網際網路打車、線上地圖等。在HTML 5的規範中，增加了獲取使用者地理位置資訊的介面Geolocation，開發者可以通過經緯度來獲取使用者的地理位置資訊，Geolocation介面的特點如下。
- Geolocation介面封裝了獲取位置資訊的技術細節。
- 開發者不需要關心資訊的來源，只需關注如何使用即可，這極大地簡化了開發的難度。
- 目前，該介面已經得到了大部分瀏覽器的支援，如Firefox、IE 9、Opera、Safari和Chrome等。
- 對於擁有GPS的裝置，定位會更加準確，如iPhone和Android手機等。
navigator.geolocation
getCurrentPosition()方法來獲取當前地理位置。
其中，navigator是瀏覽器的內建物件。
當getCurrentPosition()方法被呼叫時，會發起一個非同步請求，瀏覽器會去呼叫底層的硬體來更新當前的位置資訊。
position物件中的coords屬性包含的資訊如表所示。
| 屬性名 | 描述 |
|---|---|
| latitude | 十進位制表示的緯度座標 |
| longitude | 十進位制表示的經度座標 |
| accuracy | 當前經緯度資訊的精度（單位米） |
| altitude | 海拔高度（單位米） |
| altitudeAccuracy | 當前海拔高度的精度 |
| heading | 當前裝置的朝向（以弧度為單位），從正北開始計算 |
獲取當前位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <p id="demo">獲得您的座標：</p> <button onclick="getLocation()">試一下</button> <script> var x = document.getElementById('demo'); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition, showError); } else { x.innerHTML = '當前瀏覽器不支援地理定位'; } } // 獲取定位成功，顯示位置資訊 function showPosition(position) { x.innerHTML = 'Latitude(緯度): ' + position.coords.latitude + // 緯度 '<br>Longitude(經度): ' + position.coords.longitude; // 經度 } // 獲取定位失敗，顯示錯誤資訊 function showError(error) { switch (error.code) { case error.PERMISSION_DENIED: x.innerHTML = '使用者拒絕地理定位請求'; break; } } </script> </body> </html>
為了檢視獲取定位後的效果，我們可以手動設定一個虛擬的位置，單擊開發者工具右上角的“︙”按鈕，選擇“More tools”-“Sensors”(感測器)，然後在Geolocation對應的下拉選單中選擇“Shanghai”
呼叫百度全景地圖
百度地圖開放平臺 | 百度地圖API SDK | 地圖開發 (https://lbsyun.baidu.com/)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微軟雅黑";}
</style>
<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=您的金鑰"></script>
<title>地圖展示</title>
</head>
<body>
<div id="allmap"></div>
</body>
</html>
<script type="text/javascript">
// 百度地圖API功能
var map = new BMap.Map("allmap"); // 建立Map例項
map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地圖,設定中心點座標和地圖級別
//新增地圖型別控制元件
map.addControl(new BMap.MapTypeControl({
mapTypes:[
BMAP_NORMAL_MAP,
BMAP_HYBRID_MAP
]}));
map.setCurrentCity("北京"); // 設定地圖顯示的城市 此項是必須設定的
map.enableScrollWheelZoom(true); //開啟滑鼠滾輪縮放
</script>
自己去申請金鑰，並替換在上述程式碼中