Maison > Article > interface Web > js méthode html5 pour obtenir les informations de localisation géographique de l'utilisateur et les afficher sur Google Maps_javascript skills

js méthode html5 pour obtenir les informations de localisation géographique de l'utilisateur et les afficher sur Google Maps_javascript skills

WBOYoriginal: 2016-05-16 15:56:261684parcourir

L'exemple de cet article décrit la méthode d'utilisation de js html5 pour obtenir des informations de localisation géographique de l'utilisateur et les afficher sur Google Maps. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

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

J'espère que cet article sera utile à la conception de la programmation Web de chacun.

Déclaration：

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

Article précédent：Explication détaillée de l'utilisation de l'attribut prototype dans les connaissances JavaScript_BasicArticle suivant：Explication détaillée de l'utilisation de l'attribut prototype dans les connaissances JavaScript_Basic

Articles Liés

Voir plus