HTML5获取地理位置和定位

www.jswusn.com JS 2025-06-11 17:33:49 7次浏览


H5地理位置定位功能

首先判断用户浏览器是否支持该功能,目前大多数现代浏览器均支持,获取位置信息需用户授权同意。

function getLocation(){ 
if (navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(showPosition,showError); 
  }else{ 
    alert("浏览器不支持地理定位。"); 
  } 
}


showPosition()获取用户经度纬度

function showPosition(position){
    console.log(position); 
    var lat = position.coords.latitude; //纬度 
    var lag = position.coords.longitude; //经度 
    console.log(‘纬度:‘+lat+‘,经度:‘+lag); 
}

执行函数getLocation(),如果调用成功即可显示经度纬度,简单吧!!!

补充showError(),这个函数是报错信息

showError(error){
  console.log(error.code)
}
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; 
  } 
}

接下来用百度和谷歌提供的接口,利用获取到的经纬度查看具体的地址信息,用到了jq的ajax封装,所以得引用jq。


百度

functionshowPosition(position){ 
    //将我们获取到的经纬度保存到变量中
    var latlon = position.coords.latitude+‘,‘+position.coords.longitude; 

    //baidu接口
    var url = "http://api.map.baidu.com/geocoder/v2/?ak=C93b5178d7a8ebdb830b9b557abce78b&callback=renderReverse&location="+latlon+"&output=json&pois=0"
      $.ajax({ 
        type: "GET", 
        dataType: "jsonp", 
        url: url, 
        beforeSend: function(){ 
            $("#baidu").html(‘正在定位...‘); 
        }, 
        success: function (data) { 
            if(data.status==0){ 
                $("#baidu").html(data.result.formatted_address); 
            } 
        }, 
        error: function (XMLHttpRequest, textStatus, errorThrown) { 
            $("#baidu").html(latlon+"地址位置获取失败"); 
        } 
    }); 
});


谷歌

谷歌同上,接口如下;

var  url=‘http://maps.google.cn/maps/api/geocode/json?latlng=‘+latlon+‘&language=CN‘;
//成功回调:
success: function (data) { 
    if(data.status==‘OK‘){ 
        var results = data.results; 
        $.each(results,function(index,array){ 
            if(index==0){ 
                $("#google_geo").html(array[‘formatted_address‘]); 
            } 
        }); 
    } 
}


以上就是今天想与你分享的内容,希望对你有用。

技术分享

苏南名片

  • 联系人:吴经理
  • 电话:152-1887-1916
  • 邮箱:message@jswusn.com
  • 地址:江苏省苏州市相城区

热门文章

Copyright © 2018-2025 jswusn.com 版权所有

技术支持:苏州网站建设  苏ICP备18036849号