基於h5 ajax實現手機定位(demo)

基於h5 ajax實現手機定位(demo)_AJAX相關

最後更新：2017-01-18 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

因朋友需要，之前看了下關於h5的手機定位，目前寫了個demo在這裡貼出來，感興趣的朋友可以看一下。

目前的版本只是demo，仍有幾個問題需要完善一下，問題如下：

1，如何將經緯度等資料發送到被定位人看不到的頁面上。

2，如何繞過或或強制讓開啟連結的人允許使用定位（彈窗）。

3，目前或取經緯度後，要自行用Google地球去分析使用者位置（通過衛星地圖定位並顯示），如何簡化這一部分，讓被定位者的經緯度自動產生地圖圖片並一起匯入到其他頁面（總之不能讓被定位者察覺自己被定位的這一事實）。

<!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><div id="main"> <div class="demo">  <p>地理座標：<span id="latlon"></span></p>  <div class="geo">   <p>百度地圖定位位置：</p>   <p id="baidu_geo"></p>  </div>  <div class="geo">   <p>GOOGLE地圖定位位置：</p>   <p id="google_geo"></p>  </div> </div></div><script>function getLocation(){ if (navigator.geolocation){  navigator.geolocation.getCurrentPosition(showPosition,showError); }else{  alert("瀏覽器不支援地理定位。"); }}function showPosition(position){ $("#latlon").html("<br />緯度:"+position.coords.latitude +'<br />經度:'+ position.coords.longitude); var latlon = position.coords.latitude+','+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('正在定位...');  },  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 = 'http://maps.google.cn/maps/api/geocode/json?latlng='+latlon+'&language=CN'; $.ajax({   type: "GET",  url: url,   beforeSend: function(){   $("#google_geo").html('正在定位...');  },  success: function (json) {    if(json.status=='OK'){    var results = json.results;    $.each(results,function(index,array){     if(index==){     $("#google_geo").html(array['formatted_address']);     }    });   }  },  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>

以上代碼就是實現h5和ajax手機定位代碼，後續還會持續更新完善，請大家持續關注云棲社區網站。

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More