HTML5获取地理位置定位信息

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
function showError(error){ 
    switch(error.code) { 
        case error.PERMISSION_DENIED: 
            alert("定位失败,用户拒绝请求地理定位"); 
            break; 
        case error.POSITION_UNAVAILABLE: 
            alert("定位失败,位置信息是不可用"); 
            break; 
        case error.TIMEOUT: 
            alert("定位失败,请求获取用户位置超时"); 
            break; 
        case error.UNKNOWN_ERROR: 
            alert("定位失败,定位系统失效"); 
            break; 
    } 
} 
function showPosition(position){ 
    var lat = position.coords.latitude; //纬度 
    var lag = position.coords.longitude; //经度 
    alert('纬度:'+lat+',经度:'+lag); 
} 
function getLocation(){ 
    if (navigator.geolocation){ 
        navigator.geolocation.getCurrentPosition(showPosition,showError); 
    }else{ 
        alert("浏览器不支持地理定位。"); 
    } 
} 
		</script>
		<span onclick="getLocation()">获取当前经纬度</span>
	</body>
</html>

 

转载于:https://my.oschina.net/zhiqiangwang/blog/1557951

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
HTML5提供了获取地理位置以及定位的功能。通过Geolocation API可以访问用户的位置信息,具体实现方式如下: 首先需要使用navigator.geolocation对象来获取位置信息。该对象包含三个属性:getCurrentPosition、watchPosition和clearWatch。getCurrentPosition方法可以获取用户的当前位置信息,watchPosition方法则可以实时监控用户位置的变化。clearWatch方法用于清除watchPosition的操作。 在获取地理位置信息之前需要判断浏览器是否支持Geolocation API,可以通过以下代码进行判断: if (navigator.geolocation) { // 支持Geolocation API } else { // 不支持Geolocation API } 获取用户位置信息的代码如下: navigator.geolocation.getCurrentPosition(function(position) { // 获取到位置信息后的处理操作 }, function(error) { // 获取位置信息失败的处理操作 }); 在该方法中可以添加两个回调函数,成功获取到位置信息后会调用第一个回调函数,否则会调用第二个回调函数。 定位则是通过GPS、WIFI等技术来获取用户所在的地理位置定位可以通过访问IP地址或者使用HTML5提供的Geolocation API实现。通过IP地址获取的精度一般不够高,而Geolocation API可以获得更加准确的地理位置信息。 总之,HTML5提供了非常方便的方式来获取用户的位置信息定位,使得开发者可以更加灵活地利用这些信息为用户提供更好的体验服务。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值