Maison >interface Web >js tutoriel >Support du navigateur de géolocalisation du navigateur HTML5

Support du navigateur de géolocalisation du navigateur HTML5

William Shakespeare
William Shakespeareoriginal
2025-02-24 09:03:11318parcourir

Ce billet de blog explore comment différents navigateurs Web gèrent la géolocalisation HTML5 et Google Maps. L'auteur a testé Firefox 16, Chrome 23, IE9, IE8 et Safari 5 pour Windows. Les navigateurs modernes prennent généralement en charge cette fonctionnalité. Les tests ont été effectués près de Brisbane, Australie.

HTML5 Browser Geolocation Browser Support

L'API de géolocalisation W3C est prise en charge par les navigateurs de bureau suivants:

  • Firefox 3.5
  • Chrome 5.0
  • safari 5.0
  • opéra 10.60
  • Internet Explorer 9.0

Firefox Html5 Geolocation Test Results:

HTML5 Browser Geolocation Browser Support HTML5 Browser Geolocation Browser Support

Résultats du test de géolocalisation chromé HTML5:

HTML5 Browser Geolocation Browser Support

IE9 Résultats du test de géolocalisation HTML5:

HTML5 Browser Geolocation Browser Support HTML5 Browser Geolocation Browser Support

IE8 Résultats du test de géolocalisation HTML5:

HTML5 Browser Geolocation Browser Support

SAFARI (Windows) HTML5 Geolocation Test Results:

HTML5 Browser Geolocation Browser Support HTML5 Browser Geolocation Browser Support

L'auteur note quelques écarts intéressants, en particulier IE9 identifiant mal la ville. IE8, comme prévu, manquait de soutien, et Safari pour Windows a également montré un comportement inattendu. Des tests supplémentaires sur un Mac sont prévus. Un exemple de code démontrant la géolocalisation HTML5 avec Google Maps est fourni ci-dessous. L'auteur souligne également que la géolocalisation a des applications au-delà du traçage de la carte, faisant référence aux cas d'utilisation W3C pour d'autres exemples.

Exemple de code:

<code class="language-javascript">
    Get Geolocation Using HTML5 Demo | jQuery4u



      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
      #map_canvas {
        height: 100%;
      }

      @media print {
        html, body {
          height: auto;
        }

        #map_canvas {
          height: 650px;
        }
      }



      var map;

      function initialize() {
        var myOptions = {
          zoom: 6,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);

        // Try HTML5 geolocation
        if(navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = new google.maps.LatLng(position.coords.latitude,
                                             position.coords.longitude);

            var infowindow = new google.maps.InfoWindow({
              map: map,
              position: pos,
              content: 'Location found using HTML5.'
            });

            map.setCenter(pos);
          }, function() {
            handleNoGeolocation(true);
          });
        } else {
          // Browser doesn't support Geolocation
          handleNoGeolocation(false);
        }
      }

      function handleNoGeolocation(errorFlag) {
        if (errorFlag) {
          var content = 'Error: The Geolocation service failed.';
        } else {
          var content = 'Error: Your browser doesn\'t support geolocation.';
        }

        var options = {
          map: map,
          position: new google.maps.LatLng(60, 105),
          content: content
        };

        var infowindow = new google.maps.InfoWindow(options);
        map.setCenter(options.position);
      }

      google.maps.event.addDomListener(window, 'load', initialize);
</code>

Des questions fréquemment posées sur la géolocalisation du navigateur:

Une section FAQ portant sur la fonctionnalité, la précision, l'utilisation, les implications de confidentialité de l'API de géolocalisation, la compatibilité des navigateurs, la gestion des erreurs, les capacités de suivi, les méthodes de test, les fonctionnalités hors ligne et le coût sont inclus.

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!

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