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
Libérer: 2025-02-24 09:03:11
original
319 Les gens l'ont consulté

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:

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

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 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
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal