Maison > interface Web > js tutoriel > le corps du texte

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

亚连
Libérer: 2018-05-24 17:22:36
original
2216 Les gens l'ont consulté

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>
Copier après la connexion

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

Articles connexes :

Résolution du problème avant et arrière d'ajax basé sur Jquery.history

Réalisation de l'intervalle N basé sur la technologie Jquery ajax Transmettre la valeur à une page en quelques secondes

Comprendre la valeur de l'option d'attribut de type de données dans jquery ajax

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal