web-dev-qa-db-fra.com

Existe-t-il un moyen d'invoquer la navigation à partir du navigateur mobile?

Je développe un très petit site Web HTML5/javascript pour être ouvert par les navigateurs mobiles à partir d'appareils tels que Android/iphone. J'utilise la géolocalisation de HTML5 pour obtenir l'emplacement actuel, mais une fois que je l'ai, je voulez naviguer vers une destination. Le mieux que j'ai trouvé est que l'utilisateur clique sur un lien similaire au lien ci-dessous

https://maps.google.com/maps?saddr=london&daddr=paris

Cependant, cela n'ouvre pas l'application de navigation, il passe simplement au site Web mobile de Google Maps. Existe-t-il un moyen d'ouvrir l'application de navigation (GPS) en utilisant HTML5/javascript? Quelque chose comme ça:

navigate:London to Paris
javascriptandroidhtmlgoogle-mapsnavigation
16
C graphics

Vous pouvez utiliser des liens géographiques pour ouvrir l'application de navigation sur Android. Malheureusement, cela n'est pas pris en charge sous iOS. Mais généralement, vous devez vous rappeler que vous ne pouvez pas contrôler directement la façon dont ce lien est géré sur l'appareil, car j'ai dit qu'iOS ne fait rien ou peut même afficher une erreur de lien non valide, et il peut y avoir Android = appareils qui ne prennent pas non plus en charge cette fonctionnalité. N'oubliez pas que vous ne pouvez pas être sûr que cela fonctionne n'importe où et que votre site Web ne devrait pas dépendre de cette fonctionnalité, il devrait simplement être un peu plus convivial pour les appareils qui prennent en charge cette fonctionnalité.

1) Affichage d'un emplacement dans une application de carte native

Avec le lien géographique, vous pouvez spécifier un emplacement comme celui-ci:

geo:longitude,laditude

Ou comme ça:

geo:street+address

Vous pouvez également rechercher une adresse comme celle-ci:

geo:?q=street+address

Vous pouvez également définir un niveau de zoom comme celui-ci:

geo:street+address?z=3

Et il est également possible de combiner plusieurs paramètres comme celui-ci:

geo:?q=street+address&z=15

Mais attention, cela ne fonctionne pas comme prévu. Dans ce cas, dans Google Maps, il commence avec le niveau de zoom défini, puis démarre la recherche et effectue un zoom avant sur la cible.

Ici est un peu de documentation Android.

2) Ouverture d'un itinéraire dans Google Maps

Vous pouvez également utiliser le lien suivant pour afficher simplement un itinéraire entre deux emplacements:

http://maps.google.com/maps?saddr=street+adress&daddr=street+address

Et les coordonnées fonctionnent également avec ceci:

http://maps.google.com/maps?saddr=50,10&daddr=50,20

Vous pouvez à nouveau l'utiliser comme ceci:

<a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a>

3) Démarrage immédiat d'une navigation

Avec cette option, le lien ouvre un itinéraire vers un emplacement et l'appareil ne montre pas seulement l'itinéraire mais il commence immédiatement à naviguer:

google.navigation:q=street+address

Vous pouvez également utiliser des coordonnées:

google.navigation:q=50,10

Vous l'utiliseriez comme ceci:

<a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a>

4) Test

J'ai tout testé sur un Nexus 5 exécutant Android 4.4 (KitKat) avec le code HTML suivant:

<!DOCTYPE html>
<html>

<head>
  <title>Geo Link Test</title>
</head>

<body>
  <p><a href="geo:50,10">Location 50/10</a></p>
  <p><a href="geo:Vienna">Location Vienna</a></p>
  <p><a href="geo:?z=5&q=New+York">Zoom 5, Search for New York</a></p>
  <p><a href="geo:?q=San+Francisco&z=15">Zoom 15, Search for San Francisco</a></p>
  <p><a href="google.navigation:q=San+Francisco">Navigation to San Francisco</a></p>
  <p><a href="google.navigation:q=50,10">Navigation to 50/10</a></p>
  <p><a href="http://maps.google.com/maps?saddr=New+York&daddr=San+Francisco">Route New York --> San Francisco</a></p>
  <p><a href="http://maps.google.com/maps?saddr=50,10&daddr=50,20">Route 50/10 --> 50/20</a></p>
</body>

</html>
49
Xaver Kapeller

bien après de nombreux tests de liens, je l'ai résolu pour moi:

<a href="http://maps.google.com/maps?q=loc: <lat>,<lng>&navigate=yes">nav</a>

celui-ci ouvre le menu de choix de l'application de navigation utilisateur et passe les cordons auxquels vous souhaitez naviguer.

prendre plaisir

10
David

Depuis que cette question a été publiée pour la première fois et répondue, en octobre 2017, Google a développé une API appelée Maps Maps .

Il s'agit d'une URL multi-plateforme universelle pour le lancement de Google Maps.

https://www.google.com/maps/dir/?api=1 est le point de terminaison des cartes pouvant inclure la navigation.

Vous ajoutez les paramètres suivants:

  • Origine: &Origin=new+york
  • Destination: &destination=san+fransisco
  • La navigation: &dir_action=navigate

Si vous omettez l'Origin, il détectera l'emplacement de l'appareil, ce qui est probablement mieux pour la navigation de toute façon:

https://www.google.com/maps/dir/?api=1&destination=san+fransisco&dir_action=navigate

Cela n'ouvrira pas immédiatement la navigation, mais vous amènera à une carte Google, qui aura l'icône de navigation sur la page, et donnera à l'utilisateur la possibilité d'utiliser l'application (ou de la télécharger s'il ne l'a pas). Cela semble être une bonne solution. Je viens de le tester dans mon navigateur, mon Google Pixel et mon iPhone et cela fonctionne de la même manière sur chaque appareil mobile.

Consultez le reste de la documentation pour des fonctionnalités plus utiles: https://developers.google.com/maps/documentation/urls/guide

8
wlh