html5 返回当前地理位置的坐标点(经纬度)

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">将以下的经纬度输入谷歌地图:</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 = '将以下的经纬度输入谷歌地图(纬度 经度)查看自己位置:';
        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>




posted @ 2017-04-16 12:14  wzzkaifa  阅读(276)  评论(0编辑  收藏  举报