码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2017-05-26 17:30:48      阅读:231      评论:0      收藏:0      [点我收藏+]

标签:ack   navigator   gis   onclick   地理   port   long   available   dea   

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>



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

标签:ack   navigator   gis   onclick   地理   port   long   available   dea   

原文地址:http://www.cnblogs.com/yxysuanfa/p/6909551.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!