Maison > Article > interface Web > Implémentation du positionnement du téléphone mobile basé sur h5 ajax

Implémentation du positionnement du téléphone mobile basé sur h5 ajax

亚连original: 2018-05-24 17:22:362195parcourir

Je n'ai aucun projet à faire récemment. Je demande à un ami de m'aider à implémenter la fonction de positionnement du téléphone mobile. J'ai utilisé h5 et ajax pour implémenter le positionnement du téléphone mobile. démo. Je continuerai à l'améliorer à l'avenir. J'aimerais le partager avec vous. Tout le monde, les amis qui en ont besoin peuvent s'y référer

En raison des besoins de mes amis, j'ai regardé le mobile. positionnement téléphonique du h5 auparavant, et maintenant j'ai écrit une démo et je l'ai publiée ici. Les amis intéressés peuvent y jeter un œil.

La version actuelle n'est qu'une démo. Il reste encore quelques problèmes à améliorer. Les questions sont les suivantes :

1. comme la longitude et la latitude à la personne positionnée afin qu'elle ne puisse pas le voir sur la page ?

2. Comment contourner ou forcer la personne qui ouvre le lien à autoriser l'utilisation du positionnement (fenêtre pop-up).

3. Actuellement ou après avoir obtenu la longitude et la latitude, vous devez utiliser Google Earth pour analyser la position de l'utilisateur (le localiser et l'afficher via des cartes satellites). Comment simplifier cette partie pour que la longitude et la latitude de). la personne localisée peut générer automatiquement une image cartographique et l'importer ensemble ? Aller sur d'autres pages (bref, la personne ciblée ne peut pas avoir conscience du fait qu'elle est ciblée).

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

Ce qui précède est ce que j'ai compilé pour vous. J'espère qu'il vous sera utile à l'avenir.

Articles Liés

Voir plus