Heim > Artikel > Web-Frontend > js HTML5-Methode zum Abrufen geografischer Standortinformationen des Benutzers und zur Anzeige in Google Maps_Javascript-Kenntnisse

js HTML5-Methode zum Abrufen geografischer Standortinformationen des Benutzers und zur Anzeige in Google Maps_Javascript-Kenntnisse

WBOYOriginal: 2016-05-16 15:56:261695Durchsuche

Das Beispiel in diesem Artikel beschreibt die Methode zur Verwendung von js html5, um geografische Standortinformationen des Benutzers abzurufen und diese auf Google Maps anzuzeigen. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your position:</p>
<button onclick="getLocation()">Try It</button>
<div id="mapholder"></div>
<script>
var x=document.getElementById("demo");
function getLocation()
 {
 if (navigator.geolocation)
  {
  navigator.geolocation.getCurrentPosition(showPosition,showError);
  }
 else{x.innerHTML="Geolocation is not supported by this browser.";}
 }
function showPosition(position)
 {
 var latlon=position.coords.latitude+","+position.coords.longitude;
 var img_url="http://maps.googleapis.com/maps/api/staticmap&#63;center="
 +latlon+"&zoom=14&size=400x300&sensor=false";
 document.getElementById("mapholder").innerHTML="<img src='"+img_url+"' />";
 }
function showError(error)
 {
 switch(error.code) 
  {
  case error.PERMISSION_DENIED:
   x.innerHTML="User denied the request for Geolocation."
   break;
  case error.POSITION_UNAVAILABLE:
   x.innerHTML="Location information is unavailable."
   break;
  case error.TIMEOUT:
   x.innerHTML="The request to get user location timed out."
   break;
  case error.UNKNOWN_ERROR:
   x.innerHTML="An unknown error occurred."
   break;
  }
 }
</script>
</body>
</html>

Ich hoffe, dass dieser Artikel für das Webprogrammierungsdesign aller hilfreich sein wird.

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：Detaillierte Erläuterung der Verwendung von Prototypattributen in JavaScript_GrundkenntnisseNächster Artikel：Detaillierte Erläuterung der Verwendung von Prototypattributen in JavaScript_Grundkenntnisse

In Verbindung stehende Artikel

Mehr sehen