html5 返回當前地理位置的座標點（經緯度）

最後更新：2017-04-16 來源：互聯網

上載者：User

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

標籤：rip oct oca Google地圖 lis show ntp one cat

BAIDU

<!DOCTYPE html><html><body><p id="demo">點擊這個按鈕，獲得您的座標：</p><button onclick="getLocation()">試一下</button><script>var x=document.getElementById("demo");function getLocation()  {  if (navigator.geolocation)    {    navigator.geolocation.getCurrentPosition(showPosition);    }  else{x.innerHTML="Geolocation is not supported by this browser.";}  }function showPosition(position)  {  x.innerHTML="Latitude: " + position.coords.latitude +   "<br />Longitude: " + position.coords.longitude;      }</script></body></html>

GOOGLE

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>GIS開發利用html5擷取經緯度</title></head><body><span id="support">將以下的經緯度輸入Google地圖：</span><div id="show">緯度：<span id="latitude"></span><br />經度：<span id="longitude"></span><br />經緯度準確度：<span id="accuracy"></span><br />海拔：<span id="altitude"></span><br />海拔高度的準確度：<span id="altitudeAcuracy"></span><br />朝向：<span id="heading"></span><br />速度：<span id="speed"></span></div><script type="text/javascript">var doc = document,    latitude = doc.getElementById(‘latitude‘),    longitude = doc.getElementById(‘longitude‘),    accuracy = doc.getElementById(‘accuracy‘),    altitude = doc.getElementById(‘altitude‘),altitudeAcuracy = doc.getElementById(‘altitudeAcuracy‘),heading = doc.getElementById(‘heading‘),speed = doc.getElementById(‘speed‘),support = doc.getElementById(‘support‘),    showDiv = doc.getElementById(‘show‘);function lodeSupport(){    if(navigator.geolocation){        support.innerHTML = ‘將以下的經緯度輸入Google地圖(緯度 經度)查看自己位置：‘;        showDiv.style.display = ‘block‘;        navigator.geolocation.getCurrentPosition(updataPosition,showError);    }else{        support.innerHTML = ‘對不起，瀏覽器不支援！
‘;        showDiv.style.display = ‘none‘;    }}function updataPosition(position){    var latitudeP = position.coords.latitude,        longitudeP = position.coords.longitude,        accuracyP = position.coords.accuracy,altitudeP = position.coords.altitude,altitudeAcuracyP = position.coords.altitudeAcuracy,headingP = position.coords.heading,speedP = position.coords.speed;    latitude.innerHTML = latitudeP;    longitude.innerHTML = longitudeP;    accuracy.innerHTML = accuracyP;altitude.innerHTML = altitudeP;altitudeAcuracy.innerHTML = altitudeAcuracyP;heading.innerHTML = headingP;speed.innerHTML = speedP;}function showError(error){  switch(error.code)    {    case error.PERMISSION_DENIED:      showDiv.innerHTML="使用者拒絕訪問地理位置"      break;    case error.POSITION_UNAVAILABLE:      showDiv.innerHTML="地理位置資訊無法擷取"      break;    case error.TIMEOUT:      showDiv.innerHTML="擷取位置時間逾時"      break;    case error.UNKNOWN_ERROR:      showDiv.innerHTML="我擦，這是一個未知的錯誤"      break;    }}window.addEventListener(‘load‘, lodeSupport , true);</script></body></html>

html5 返回當前地理位置的座標點（經緯度）

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 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