Heim > Artikel > Web-Frontend > Implementierung der Mobiltelefonpositionierung basierend auf H5 Ajax

Implementierung der Mobiltelefonpositionierung basierend auf H5 Ajax

亚连Original: 2018-05-24 17:22:362195Durchsuche

Ich habe in letzter Zeit kein Projekt zu erledigen. Ich bitte einen Freund, mir bei der Implementierung der Mobiltelefonpositionierungsfunktion zu helfen Demo. Ich werde es in Zukunft weiter verbessern. Alle Freunde, die es brauchen, können darauf zurückgreifen.

Aufgrund der Bedürfnisse meiner Freunde habe ich mir das Handy angesehen Telefonpositionierung von h5 schon einmal, und jetzt habe ich eine Demo geschrieben und sie hier gepostet Freunde, die interessiert sind, können einen Blick darauf werfen.

Die aktuelle Version ist nur eine Demo. Es gibt noch einige Probleme, die verbessert werden müssen. Die Fragen lauten wie folgt:

Wie werden Daten gesendet? Wie Längen- und Breitengrad für die Person, die so positioniert ist, dass sie es nicht auf der Seite sehen kann?

2. So umgehen oder erzwingen Sie die Verwendung der Positionierung durch die Person, die den Link öffnet (Popup-Fenster).

3. Derzeit oder nach Erhalt des Längen- und Breitengrads müssen Sie Google Earth verwenden, um den Standort des Benutzers zu analysieren (diesen Teil zu lokalisieren und anzuzeigen, damit der Längen- und Breitengrad angezeigt wird). Die geortete Person kann automatisch ein Kartenbild erstellen und es zusammen importieren? Zu anderen Seiten gehen (kurz gesagt, die anvisierte Person kann nicht wissen, dass sie anvisiert wird).

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

Das oben Gesagte habe ich für Sie zusammengestellt. Ich hoffe, es wird Ihnen in Zukunft hilfreich sein.

Verwandte Artikel:

Lösen des Vorwärts- und Rückwärtsproblems von Ajax basierend auf Jquery.history

Realisieren des Intervalls N basierend zur JQuery-Ajax-Technologie. Übergeben Sie einen Wert in Sekunden an eine Seite.

Verstehen Sie den Wert der Datentypattributoption in JQuery-Ajax

Das obige ist der detaillierte Inhalt vonImplementierung der Mobiltelefonpositionierung basierend auf H5 Ajax. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Nutzen Sie die H5-Funktion FormData, um Dateien ohne Aktualisierung hochzuladenNächster Artikel：Nutzen Sie die H5-Funktion FormData, um Dateien ohne Aktualisierung hochzuladen

In Verbindung stehende Artikel

Mehr sehen