géolocalisation dans google map et HTML5

Je travaille sur le service basé sur la localisation. Je n'ai pas trouvé de réponse claire à mes questions suivantes et je demande donc:géolocalisation dans google map et HTML5

Comment activer la géolocalisation HTML5 sur notre propre serveur? Ou existe-t-il un DB central de géolocalisation qui fournira le service de localisation par défaut (comme DNS)? J'ai été stupéfait de voir la précision de la géolocalisation dans google map (http://html5demos.com/geo) dans mon ordinateur portable (évidemment sans GPS) qui se trouve dans la plage de ~ 20M. Quelle est la technologie? Comment mettre en œuvre cela dans notre propre système? Lorsque je cherchais dans ma localisation IP, elle indiquait le bureau du fournisseur d'accès Internet sur la carte, soit ~ 15 km plus loin, par opposition à une situation récente où l'emplacement était presque exact. Quelle pourrait être la raison? pourrait-il être parce que j'utilise mon téléphone Android en utilisant le même routeur Wireles et il prend l'emplacement à partir de là? Ou en HTML5, ils ont commencé à localiser des adresses IP spécifiques (ce qui semble peu probable).

Source

2010-11-01 Morison

// Check for geolocation support 
if (navigator.geolocation) { 
    // Use method getCurrentPosition to get coordinates 
    navigator.geolocation.getCurrentPosition(function (position) { 
     // Access them accordingly 
     alert(position.coords.latitude + ", " + position.coords.longitude); 
    }); 
}

http://robertnyman.com/2010/03/15/geolocation-in-web-browsers-to-find-location-google-maps-examples/

Source

2010-11-01 16:41:03 Barkermn01

Vous pouvez trouver beaucoup d'informations sur la façon dont cela fonctionne et comment l'utiliser dans vos propres sites Web dans l'excellent Dive Into HTML 5. Ce livre vous recommande d'utiliser Modernizr, un exemple simple qui est fourni:

function get_location() { 
if (Modernizr.geolocation) { 
navigator.geolocation.getCurrentPosition(show_map); 
} else { 
// no native support; maybe try Gears? 
} 
}

La principale façon qu'il fonctionne sur votre ordinateur portable est en utilisant les positions connues des points d'accès sans fil locaux. Cela varie un peu du navigateur au navigateur - firefox a a good explanation here. Ils utilisent positioning services from Google, qui ont été créés par la cartographie effectuée par les voitures Street View de Google.

Source

2010-11-01 16:44:40

C'est en fait assez simple. L'exemple ci-dessus de Dive into HTML est incomplet, car il ne montre pas la fonction show_map, qui est une fonction créée par l'utilisateur qui lit réellement les données entrantes et fait quelque chose avec elle. Voici un exemple plus complet: la fonction

<!DOCTYPE HTML> 

<html lang = "en"> 

<head> 

    <title>location.html</title> 

    <meta charset = "UTF-8" /> 

    <script type = "text/javascript"> 

    //<![CDATA[ 



    function getLoc(){ 

    navigator.geolocation.getCurrentPosition(showMap); 

    } // end getLoc 



    function showMap(position){ 

    var lat = position.coords.latitude; 

    var long = position.coords.longitude; 

    var linkUrl = "http://maps.google.com?q=" + lat + "," + long; 

    var mapLink = document.getElementById("mapLink"); 

    mapLink.href = linkUrl; 

    var embedMap = document.getElementById("embedMap"); 

    embedMap.src = linkUrl + "&z=16&amp;output=embed"; 

    } // end showMap 



    //]]> 

    </script> 

</head> 



<body onload = "getLoc()"> 

    <h1>Geolocation Demo</h1> 



    <p> 

    <a id = "mapLink" 

     href = "http://maps.google.com">click for a map</a> 

    </p> 



<iframe id = "embedMap" 

     width="800" 

     height="500" 

     frameborder="0" 

     scrolling="no" 

     marginheight="0" 

     marginwidth="0" 

     src= ""> 

</iframe><br /> 



</body> 

</html>

Cet exemple (de mon prochain livre HTML5) a une getLoc() appelé par le mécanisme corps onload. Cela utilise la fonction navigator.geolocation.getCurrentPosition() pour demander un vecteur d'autorisation. Il apparaîtra une boîte de dialogue d'autorisation, qui sera rejetée si l'utilisateur choisit de ne pas partager sa position actuelle. Si l'utilisateur joue, la fonction de rappel indiquée (dans mon cas showMap) sera affichée.

La fonction de rappel accepte automatiquement un objet de position spécial comme seul paramètre. Cet objet a un certain nombre d'attributs potentiellement utiles, mais la latitude et la longitude sont les plus utiles. Vous pouvez utiliser ces valeurs pour imprimer simplement la position actuelle. Vous pouvez également concaténer ces valeurs dans une URL Google Maps pour obtenir une carte Google rapide de l'emplacement actuel. J'ai également intégré une carte Google dans ma page actuelle, et modifié l'URL de la carte intégrée (iframe) pour obtenir des commentaires immédiats.

Espérons que cela aide!

Source

2010-11-01 17:00:19

Le point qui manque encore est la technologie sous-jacente en HTML5 géolocalisation. Si je ne veux pas (utiliser) google map ou google service, comment vais-je intégrer ce service de géolocalisation dans mon propre serveur? La base de données pour la géolocalisation IP est-elle universelle? Ou, un service spécifique basé sur l'entreprise? – Morison

@Morison la façon dont HTML5 spécifie que la géolocalisation fonctionne est que vous demandez l'emplacement de l'utilisateur depuis son navigateur. Le navigateur le fournit cependant comme il le peut. Dans le cas de Firefox, il envoie des informations sur les points d'accès sans fil à proximité à Google, puis renvoie les résultats au site Web qui l'a demandé. Pour Mobile Safari et Android, il peut utiliser les informations GPS et cellulaires de l'appareil. Une fois que vous avez l'emplacement, vous pouvez faire ce que vous voulez avec - vous n'avez pas besoin d'afficher une carte google, vous pouvez par exemple personnaliser votre contenu pour l'emplacement, ou afficher une carte de Bing. –

function GetGeolocation() { 

navigator.geolocation.getCurrentPosition(GetCoords, GetError); 

}

maintenant vérifier les GetCords fonctionnent

function GetCoords(position){ 

alert('latitude: '+ position.coords.latitude); 

alert('longitude: '+ position.coords.longitude); 

alert('accuracy: '+ position.coords.accuracy); 

FindmeOnMap(position.coords.latitude, position.coords.longitude); 

}

Source

2011-11-05 16:56:59

Essayez Ce code

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Geolocation</title> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 
    <meta charset="utf-8"> 
    <style> 
     html, body, #map-canvas { 
     height: 100%; 
     margin: 0px; 
     padding: 0px 
     } 
    </style> 
    <!-- 
    Include the maps javascript with sensor=true because this code is using a 
    sensor (a GPS locator) to determine the user's location. 
    See: https://developers.google.com/maps/documentation/javascript/tutorial#Loading_the_Maps_API 
    --> 
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script> 

    <script> 
// Note: This example requires that you consent to location sharing when 
// prompted by your browser. If you see a blank space instead of the map, this 
// is probably because you have denied permission for location sharing. 

var map; 

function initialize() { 
    var mapOptions = { 
    zoom: 6 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), 
     mapOptions); 

    // 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); 

    </script> 
    </head> 
    <body> 
    <div id="map-canvas"></div> 
    </body> 
</html>

Source

2014-01-09 13:13:21

géolocalisation dans google map et HTML5

Répondre

Questions connexes