집 > 기사 > 웹 프론트엔드 > h5 ajax 기반 휴대폰 위치 구현

h5 ajax 기반 휴대폰 위치 구현

亚连원래의: 2018-05-24 17:22:362192검색

최근에는 할 프로젝트가 없습니다. 친구에게 휴대폰 위치 확인 기능을 구현하는 데 도움을 요청하고 있습니다. 구현하는 방법은 여러 가지가 있습니다. 휴대폰 위치 확인을 구현하기 위해 여러 가지 방법을 사용했을 뿐입니다. 앞으로도 계속 개선해 나가도록 하겠습니다. 필요하신 친구들은 참고하시면 됩니다

친구들의 요구로 인해 예전에 h5의 휴대폰 포지셔닝을 살펴보았는데, 지금은 관심 있는 친구는 데모를 작성하여 여기에 게시했습니다.

현재 버전은 단지 데모일 뿐이며 아직 개선해야 할 몇 가지 문제가 있습니다. 질문은 다음과 같습니다.

1. 경도, 위도 등의 데이터를 전송할 수 없는 페이지로 보내는 방법. 표적이 된 사람이 본 것입니다.

2. 링크를 연 사람에게 포지셔닝(팝업창) 사용을 허용하도록 우회하거나 강제하는 방법.

3. 현재 또는 경도와 위도를 얻은 후에는 Google Earth를 사용하여 사용자의 위치를 분석해야 합니다(위성 지도를 통해 찾아 표시). 이 부분을 단순화하여 위치를 찾는 사람의 경도와 위도를 표시하는 방법. 자동으로 지도 이미지를 생성하여 다른 페이지로 함께 가져올 수 있습니다(즉, 위치에 있는 사람은 자신이 위치에 있다는 사실을 알 수 없습니다).

<!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>

위 내용은 모든 사람을 위해 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

h5 ajax 기반 휴대폰 위치 구현

관련 기사