HTML5获取地理位置定位信息
发布时间:2015-09-16 13:02   浏览次数:2773

百度API申请地址: http://developer.baidu.com/map/

代码如下:

<!DOCTYPE HTML>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<title>演示:HTML5获取地理位置定位信息</title>

<meta name="keywords" content="html5,地理位置" />

<meta name="description" content="Helloweba文章结合实例演示HTML5、CSS3、jquery、PHP等WEB技术应用。" />

<script src="http://libs.baidu.com/jquery/1.8.2/jquery.min.js"></script>

<style type="text/css">

.demo{width:560px; margin:60px auto 10px auto}

.geo{margin-top:20px}

.demo p{line-height:32px; font-size:16px}

.demo p span,#baidu_geo,#google_geo{font-weight:bold}

</style>

</head>

<body>

  

<div id="header">

   <div id="logo"><h1><a href="http://tp.czreg.com" title="返回首页">czreg</a></h1></div>

</div>

<div id="main">

   <h2 class="top_title"><a href="http://tp.czreg.com/info.html">HTML5获取地理位置定位信息</a></h2>

  <div class="demo">

    <p>地理坐标:<span id="latlon"></span></p>

    <div class="geo">

      <p>百度地图定位位置:</p>

      <p id="baidu_geo"></p>

    </div>

  </div>

</div>

<script>

function getLocation(){

  if (navigator.geolocation){

    navigator.geolocation.getCurrentPosition(showPosition,showError);

  }else{

    alert("浏览器不支持地理定位。");

  }

}

function showPosition(position){

  $("#latlon").html("纬度:"+position.coords.latitude +',经度:'+ position.coords.longitude);

  var latlon = position.coords.latitude+','+position.coords.longitude;

  

  //baidu

  var url = "http://api.map.baidu.com/geocoder/v2/?ak=W4mWddI3Fn1ApljXoQDfyuC3&callback=renderReverse&location="+latlon+"&output=json&pois=0";

  $.ajax({ 

    type: "GET", 

    dataType: "jsonp", 

    url: url,

    beforeSend: function(){

      $("#baidu_geo").html('正在定位...');

    },

    success: function (json) { 

      if(json.status==0){

        $("#baidu_geo").html(json.result.formatted_address);

      }

    },

    error: function (XMLHttpRequest, textStatus, errorThrown) { 

      $("#baidu_geo").html(latlon+"地址位置获取失败"); 

    }

  });

}

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;

    }

}

getLocation();

</script>

<p id="stat"></p>

</body>

</html>


常州设计
Copyright By czreg.com © 2011 - 2015 常州设计 技术支持:常州设计网络 - 专注于常州网站建设!
苏ICP备12053879号-2
咨询QQ:
29303658