utilisateurs de géolocalisation via html5 et javascript

Je suis en train d'obtenir les utilisateurs de géolocalisation via le html5 la géolocalisation de l'api, et j'utilise le bout de code suivant:

if (navigator.geolocation) {
    var timeoutVal = 10 * 1000 * 1000;
    navigator.geolocation.getCurrentPosition(
      displayPosition, 
      displayError,
      { enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
    );
  }
  else {
     //DO SOME STUFF HERE
  }


  function displayPosition(position) {

    //configuration
    var myZoom = 12;
    var myMarkerIsDraggable = true;
    var myCoordsLenght = 6;
    var defaultLat = position.coords.latitude;
    var defaultLng = position.coords.longitude;
    document.getElementById('latitude').value = defaultLat;
    document.getElementById('longitude').value = defaultLng;
    /*
      1. creates the map
      2. zooms
      3. centers the map
      4. sets the map’s type
    */
    var map = new google.maps.Map(document.getElementById('canvas'), {
      zoom: myZoom,
      center: new google.maps.LatLng(defaultLat, defaultLng),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });


    });
    //centers the map on markers coords
    map.setCenter(myMarker.position);
    //adds the marker on the map
    myMarker.setMap(map);
  }

  function displayError(error) {
    var errors = { 
      1: 'Permission denied',
      2: 'Position unavailable',
      3: 'Request timeout'
    };
    alert("Error: " + errors[error.code]);
  }
});

Le problème avec cette approche est que, quelques utilisateurs ont constaté qu'il est difficile à utiliser. Quelques fois, ils ont cliqué Refuser au lieu de Permettre et fixer sur l'écran. Donc, à partir de la convivialité point de vue, je pense qu'une bonne approche serait:

Leur demander la permission.
Attendre 3 secondes, si ils cliquez sur refuser ou de ne pas répondre, d'utiliser la propriété intellectuelle pour montrer la géolocalisation sur la carte.

Comment puis-je accomplir la deuxième étape de mon ci-dessus des extraits.
S'il vous plaît laissez-moi savoir, merci!
Cependant, ce serait une meilleure façon de gérer

Est votre gestionnaire d'erreur (displayError()) n'est pas appelée lorsque l'utilisateur clique sur Refuser, ou lorsque la demande de fois? Si elle est appelé (comme il se doit), c'est là que vous aimeriez faire votre deuxième étape (utiliser l'IP de l'utilisateur à faire de géolocalisation).

OriginalL'auteur whatf | 2013-02-01

Voici un script (geolocator.js) j'ai écrit il y a quelques temps et mis à jour récemment.

Mise à jour: Geolocator v2 est sorti.

Caractéristiques:

De géolocalisation HTML5 (par autorisation de l'utilisateur)
Localisation par IP
De géocodage (coordonnées à partir de l'adresse)
Géocodage inversé (recherche d'adresses à partir des coordonnées)
Pleinement les informations d'adresse (rue, ville, quartier, région,
pays, code pays, code postal, etc...)
Mécanisme de secours (à partir de HTML5-la géolocalisation de l'IP-geo de recherche)
Regarder la position géographique
Obtenir la matrice de distance et de durée
Calculer la distance entre deux points géographiques
Obtenir des informations sur le fuseau horaire
Obtenir l'adresse IP du client
Prise en charge de Google Chargeur (charge de Google Maps de façon dynamique)
Crée dynamiquement Google Maps (avec le marqueur, la fenêtre d'information, auto-ajusté zoom)
Non-blocage de script de chargement (sources externes sont chargés à la volée sans interrompre le chargement de la page)

Voir un démo.

Voir de la documentation de l'API.

utilisateurs de géolocalisation via html5 et javascript

Utilisation:

var options = {
    enableHighAccuracy: true,
    timeout: 6000,
    maximumAge: 0,
    desiredAccuracy: 30, //meters
    fallbackToIP: true, //get location by IP if geolocation fails or rejected
    addressLookup: true, //requires Google API key
    timezone: true, //requires Google API key
    map: "my-map" //creates a Google map. requires Google API key
};
geolocator.locate(options, function (err, location) {
    console.log(err || location);
});

Exemple De Sortie:

{
    coords: {
        latitude: 37.4224764,
        longitude: -122.0842499,
        accuracy: 30,
        altitude: null,
        altitudeAccuracy: null,
        heading: null,
        speed: null
    },
    address: {
        commonName: "",
        street: "Amphitheatre Pkwy",
        route: "Amphitheatre Pkwy",
        streetNumber: "1600",
        neighborhood: "",
        town: "",
        city: "Mountain View",
        region: "Santa Clara County",
        state: "California",
        stateCode: "CA",
        postalCode: "94043",
        country: "United States",
        countryCode: "US"
    },
    formattedAddress: "1600 Amphitheatre Parkway, Mountain View, CA 94043, USA",
    type: "ROOFTOP",
    placeId: "ChIJ2eUgeAK6j4ARbn5u_wAGqWA",
    timezone: {
        id: "America/Los_Angeles",
        name: "Pacific Standard Time",
        abbr: "PST",
        dstOffset: 0,
        rawOffset: -28800
    },
    flag: "//cdnjs.cloudflare.com/ajax/libs/flag-icon-css/2.3.1/flags/4x3/us.svg",
    map: {
        element: HTMLElement,
        instance: Object, //google.maps.Map
        marker: Object, //google.maps.Marker
        infoWindow: Object, //google.maps.InfoWindow
        options: Object //map options
    },
    timestamp: 1456795956380
}

OriginalL'auteur

3

Ensuite, vous devez utiliser une géolocalisation ip de l'api comme celui-ci:

http://freegeoip.net/static/index.html

OriginalL'auteur cliffbarnes
2

Ok, donc ce n'est pas un code de réponse, plus d'une Expérience Utilisateur de réponse.

À partir d'un UX point de vue, la première chose qui ressort est le manque d'informations que vous proposez avant de déclencher le navigateur de leur demander la permission.

Je vous suggère d'avoir une sorte de superposition de la zone de montrer une capture d'écran (avec une flèche) montrer "où" sur l'écran qu'ils vont devenir demandé la permission. Vous pouvez aussi profiter de l'occasion pour leur dire ce qui va se produire si ils refusent l'autorisation ou de ne pas accepter dans un délai de 10 secondes (c'est à dire. où ils ignorer l'invite de la barre).

Je vous suggère de ne pas défaut à l'affichage de l'adresse IP, car ils sont essentiellement "pourrait être en disant:" je ne suis pas d'accord pour vous laisser savoir où j'en suis. Ensuite, vous montrera une grande carte de l'endroit où ils sont, ce qui peut freak un peu de gens qui ont cliqué nier! En outre, il peut être très imprécis.

L'idée de "ne demandez pas la permission de demander pardon", peuvent travailler dans des Biz dev, mais pas dans l'INTERFACE utilisateur comme ils ne reviendront pas.

Je voudrais vous demander si vous avez vraiment besoin de grande précision de trop, car il sera le drain de la batterie de l'utilisateur, prendre plus de temps, et ne peut pas vous donner beaucoup plus pour votre argent, surtout si vous avez seulement besoin de savoir vaguement où ils sont. Vous pouvez toujours l'appeler de nouveau plus tard pour une lecture plus précise si vous en avez besoin.

La notion de timing si ils ne sont pas cliquez sur autoriser ou de refuser pourrait être réalisé avec un setTimeout. Donc, une fois qu'ils cliquent sur "Ok je suis prêt à cliquez sur autoriser" sur votre superposition de la boîte, coup d'envoi à un délai d'attente et, si elle ne finit délai d'attente puis faire ce que vous leur avez dit que vous feriez dans l'étape ci-dessus.

En utilisant cette méthode, vous force à l'utilisateur d'autoriser ou de refuser(ignorer),-la façon dont il met le contrôle de retour dans votre cour, et de garder l'utilisateur totalement informés.

Bien que ce n'est pas un code de réponse spécifique, il est clair à partir de votre JS que "le code de la mise en œuvre de l'aide" n'est pas vraiment la question ici. J'espère que si rien d'autre, cela vous arrive de penser un peu plus à propos de votre Expérience Utilisateur.

Très bien mis. Je veux deuxième la remarque faite à propos de défaut pour afficher la Localisation IP, quand ils ont d'abord Refuser de montrer leur emplacement - ce serait sans aucun doute que l'utilisateur l'impression de "dangereuse" la visite de votre site, car ils ne seront pas nécessairement être conscient que votre utilisation d'un IP à des services de Géolocalisation, une fois qu'ils refuser de géolocalisation HTML5.
J'ai fait une évaluation sur quelques gratuit IP pour les services de Géolocalisation là et par rapport à leur exactitude sur une carte. Vous pouvez le vérifier ici si votre décider sur un service à utiliser: svignara.github.com/geolocation.html Vous pouvez vérifier mon code sur github pour voir comment faire de l'ajax demandes pour ces services.

OriginalL'auteur Rick Hurst
0

regardez cette tutsplus exemple http://mobile.tutsplus.com/tutorials/mobile-web-apps/html5-geolocation/

je veux une réponse pour la webapp.

OriginalL'auteur Shushant

Cela, peut-être vous aider:
http://jsfiddle.net/sandesh2302/FghFZ/
J'ai utilisé pour mon stuff, il a bien fonctionné.

Ex:

    <!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />    
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=true"></script>    
<script type="text/javascript">
function getLocation(){
navigator.geolocation.getCurrentPosition(handleSuccess,handleError);
}
function initiate_watchlocation() {  
if(watchProcess == null){
watchProcess = navigator.geolocation.watchPosition(handleSuccess,handleError);
}
} 
function stop_watchlocation() {  
if(watchProcess != null){
navigator.geolocation.clearWatch(watchProcess);
}
} 
function handleSuccess(position){
drawMap(position);
}
function handleError(error){
switch(error.code)
{
case error.PERMISSION_DENIED: alert("User did not share geolocation data");break;  
case error.POSITION_UNAVAILABLE: alert("Could not detect current position");break;  
case error.TIMEOUT: alert("Retrieving position timed out");break;  
default: alert("Unknown Error");break;  
}
}
function drawMap(position) {
var container = $('#map_canvas');
var myLatLong = new google.maps.LatLng(position.coords.latitude,position.coords.longitude);
var mapOptions = {
center: myLatLong,
zoom: 12,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(container[0],mapOptions);
container.css('display','block');
var marker = new google.maps.Marker({ 
position: myLatLong,
map:map,
title:"My Position (Accuracy of Position: " + position.coords.accuracy + " Meters), Altitude: " 
+ position.coords.altitude + ' Altitude Accuracy: ' + position.coords.altitudeAccuracy
});
}
function drawStaticMap(position){
var container = $('#map_canvas');
var imageUrl = "http://maps.google.com/maps/api/staticmap?sensor=false&center=" + position.coords.latitude + "," +  
position.coords.longitude + "&zoom=18&size=640x500&markers=color:blue|label:S|" +  
position.coords.latitude + ',' + position.coords.longitude;  
container.css({
'display':'block',
'width' : 640
});
$('<img/>',{
src : imageUrl
}).appendTo(container);
} 
</script>
</head>
<body >
<button id="getLocation">Find My Location</button>
<div style="text-align:center">
<button id="initWatch">Put Watch on Your Position</button>
<button id="stopWatch">Stop Position Watching</button>
</div>
<div id="map_canvas" ></div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</body>
</html>

OriginalL'auteur StackedFlow

0

Vous pouvez utiliser ce service en ligne pour obtenir le lat gnl facilement:

http://dev.maxmind.com/geoip/javascript

Concernant le délai, je ne pense pas qu'il y a une manière d'interférer avec les navigateurs autorisation mécanisme (comme dans, pour fermer cette autorisation popup après un certain nombre de secondes) - bien que je serais heureux de les avoir tort. Ce que vous pourriez faire serait de mettre une minuterie et après trois secondes, obtenir l'adresse IP en fonction de la géolocalisation et de l'ensemble de la carte (ou de rafraîchir la page après 3 secondes, et de définir un cookie, ce qui déclenche l'IP en fonction de geo et pas le HTML5 geo, mais c'est un peu plus haut, si vous me demandez).

Puis, si ils donnent l'autorisation, il serait d'actualisation de la carte avec la géolocalisation HTML5 (qui devrait être beaucoup plus précis). Vous pouvez également encapsuler l'IP geo de secours dans une fonction et l'utiliser s'ils n'ont pas de géolocalisation HTML5 ou ils ont frappé refuser.

Ici un violon:
http://jsfiddle.net/mfNCn/1/

Voici le rough cut du violon:
```
<script src="http://j.maxmind.com/app/geoip.js" charset="ISO-8859-1" type="text/javascript"></script>
...
var time_perm = window.setTimeout(get_by_ip, 3000);
...
function get_by_ip() {
var lat = geoip_latitude();
var lng = geoip_longitude();
map_it(lat, lng);
}
...
function map_it(lat,lng) {
//build your map here
}
```
(J'hésite à mettre l'ensemble du code chunk sur ici, car c'est assez long, afin de vérifier les violons pour le repos et la pleine mise en œuvre)

OriginalL'auteur hejhi

Si il y a un délai d'attente ou de l'utilisateur refuse la demande, je voudrais définir un emplacement par défaut comme New York, NY (40.7142, -74.0064). Si l'utilisateur refuse une demande, ils doivent aussi s'attendre à ce que vous ne connaissez pas leur emplacement afin de choisir un intelligible par défaut est la meilleure chose suivante.

À l'aide d'un défaut sans changer votre code beaucoup peut être accompli en appelant displayPosition({coords: {latitude: 40.7142, longitude: -74.0064}}) à deux endroits:

if (navigator.geolocation) {
var timeoutVal = 10 * 1000 * 1000;
navigator.geolocation.getCurrentPosition(
displayPosition, 
displayError,
{ enableHighAccuracy: true, timeout: timeoutVal, maximumAge: 0 }
);
}
else {
displayPosition({coords: {latitude: 40.7142, longitude: -74.0064}})
}
....
function handleError(error){
switch(error.code)
{
case error.PERMISSION_DENIED: alert("User did not share geolocation data");break;  
case error.POSITION_UNAVAILABLE: alert("Could not detect current position");break;  
case error.TIMEOUT: alert("Retrieving position timed out");break;  
default: alert("Unknown Error");break;  
}
displayPosition({coords: {latitude: 40.7142, longitude: -74.0064}});
}

Sur http://nearbytweets.com - je utiliser une "file d'attente" de fonctions pour trouver l'emplacement d'un utilisateur, une boucle dans la file d'attente jusqu'à ce que l'un d'entre eux trouve un emplacement valide. La dernière fonction retourne New York, NY, ce qui signifie que toutes les autres tentatives ont échoué. Voici un exemple de code légèrement modifié:

var position_finders = [                                                                                                                                                                                                              
function () {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(check_position, check_position);
return;
}   
check_position();
},  
function () {
check_position(JSON.parse(localStorage.getItem('last_location')));
},  
function () {
$.ajax({
url: 'http://www.google.com/jsapi?key=' + google_api_key,
dataType: 'script',
success: check_position
}); 
},  
function () {
check_position({latitude: 40.7142, longitude: -74.0064}, true);
}   
],
check_position = function (pos, failed) {
pos = pos || {}; 
pos = pos.coords ? 
pos.coords :
pos.loader ?
pos.loader.clientLocation :
pos;
if (typeof pos.latitude === 'undefined' || typeof pos.longitude === 'undefined') {
position_finders.shift()();
return;
}   
localStorage.setItem('last_location', JSON.stringify(pos));
//using your code, I would call this:
displayPosition(pos);
};
check_position();

Voici ce que chaque position_finder n':

Essaie navigator.géolocalisation.
Essaie de tirer leur dernier emplacement de localStorage
Utilise Google Chargeur pour trouver la localisation via I. P.
Utilise New York, NY

OriginalL'auteur Brian Cray

-1

À partir de l'INTERFACE utilisateur de point de vue, je voudrais suivre ces étapes:

A) montrer une belle zone de texte expliquant ce qui va se passer (I. e". le navigateur va vous demander de vous accorder une autorisation', 'cliquez sur autoriser", etc) et en demandant d'appuyer sur un bouton pour passer
B) l'affichage de la carte comme vous le faites maintenant

OriginalL'auteur aquauser

Vous devez vous connecter pour publier un commentaire.