cari

Rumah >hujung hadapan web >tutorial js >基于h5 ajax实现手机定位

基于h5 ajax实现手机定位

亚连
亚连asal
2018-05-24 17:22:362217semak imbas

最近没有项目做，正有朋友请帮忙实现手机定位功能，实现方法有很多种，我是用h5和ajax实现的手机定位，只是个demo，后续还要继续完善的，在此分享给大家，需要的朋友可以参考下

因朋友需要，之前看了下关于h5的手机定位，目前写了个demo在这里贴出来，感兴趣的朋友可以看一下。

目前的版本只是demo，仍有几个问题需要完善一下，问题如下：

1，如何将经纬度等数据发送到被定位人看不到的页面上。

2，如何绕过或或强制让打开链接的人允许使用定位（弹窗）。

3，目前或取经纬度后，要自行用谷歌地球去分析用户位置（通过卫星地图定位并显示），如何简化这一部分，让被定位者的经纬度自动生成地图图片并一起导入到其他页面（总之不能让被定位者察觉自己被定位的这一事实）。

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-">
<meta name="viewport" content="width=device-width, initial-scale=, maximum-scale=">
<title>demo..</title>
<script type="text/javascript" src="http://libs.useso.com/js/jquery/../jquery.min.js"></script>
<style type="text/css">
.demo{width:px; margin:px auto px auto}
.geo{margin-top:px}
.demo p{line-height:px; font-size:px}
.demo p span,#baidu_geo,#google_geo{font-weight:bold}
</style>
</head>
<body>
<p id="main">
 <p class="demo">
  <p>地理坐标：<span id="latlon"></span></p>
  <p class="geo">
   <p>百度地图定位位置：</p>
   <p id="baidu_geo"></p>
  </p>
  <p class="geo">
   <p>GOOGLE地图定位位置：</p>
   <p id="google_geo"></p>
  </p>
 </p>
</p>
<script>
function getLocation(){
 if (navigator.geolocation){
  navigator.geolocation.getCurrentPosition(showPosition,showError);
 }else{
  alert("浏览器不支持地理定位。");
 }
}
function showPosition(position){
 $("#latlon").html("<br />纬度:"+position.coords.latitude +&#39;<br />经度:&#39;+ position.coords.longitude);
 var latlon = position.coords.latitude+&#39;,&#39;+position.coords.longitude;
 //baidu
 var url = "http://api.map.baidu.com/geocoder/v/?ak=Cbdaebdbbbabceb&callback=renderReverse&location="+latlon+"&output=json&pois=";
 $.ajax({ 
  type: "GET", 
  dataType: "jsonp", 
  url: url,
  beforeSend: function(){
   $("#baidu_geo").html(&#39;正在定位...&#39;);
  },
  success: function (json) { 
   if(json.status==){
    $("#baidu_geo").html(json.result.formatted_address);
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) { 
   $("#baidu_geo").html(latlon+"地址位置获取失败"); 
  }
 });
 //google
 var url = &#39;http://maps.google.cn/maps/api/geocode/json?latlng=&#39;+latlon+&#39;&language=CN&#39;;
 $.ajax({ 
  type: "GET",
  url: url, 
  beforeSend: function(){
   $("#google_geo").html(&#39;正在定位...&#39;);
  },
  success: function (json) { 
   if(json.status==&#39;OK&#39;){
    var results = json.results;
    $.each(results,function(index,array){
     if(index==){
     $("#google_geo").html(array[&#39;formatted_address&#39;]);
     }
    });
   }
  },
  error: function (XMLHttpRequest, textStatus, errorThrown) { 
   $("#google_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>
</body>
</html>

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

基于Jquery.history解决ajax的前进后退问题

基于Jquery ajax技术实现间隔N秒向某页面传值

理解jquery ajax中的datatype属性选项值

Atas ialah kandungan terperinci 基于h5 ajax实现手机定位. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：利用H5特性FormData实现不刷新文件上传Artikel seterusnya：AJAX跨域请求之JSONP获取JSON数据

Artikel berkaitan

Lihat lagi