web-dev-qa-db-fra.com

Comment ouvrir l'application de carte d'un appareil mobile lorsqu'un utilisateur clique sur un lien?

J'ai une application web où si un utilisateur clique sur un lien, il devrait ouvrir une carte. La meilleure solution à laquelle je peux penser est d'ouvrir un nouvel onglet/fenêtre pour google maps en utilisant le target="_blank" attribut.

Mais je pense que il serait préférable d'ouvrir l'application de carte de l'appareil au lieu de google map.

Je sais que vous pouvez faire apparaître l'application de téléphone de l'utilisateur lorsque l'utilisateur clique sur un numéro de téléphone avec l'attribut href pointant vers tel:<the phone number>. Je me demande si cela est également possible avec l'application cartographique.

Existe-t-il un moyen d'autoriser une balise d'ancrage pour ouvrir l'application de carte de l'appareil mobile lorsque l'utilisateur clique dessus?

htmlmobile
34
Sal

Vous pouvez utiliser le GEO URI Scheme "geo: latitude, longitude" spécifié par RFC 587 dans un lien tel que

<a href="geo:124.028582,-29.201930" target="_blank">Click here for map</a>

Il y a aussi le comgooglemaps:, qui lance la application Google Maps pour iOS , par exemple:

comgooglemaps://?center=40.765819,-73.975866&zoom=14&views=traffic

Où

  • center: Il s'agit du point central de la fenêtre de la carte. Formaté sous la forme d'une chaîne séparée par des virgules de latitude, longitude.
  • mapmode: définit le type de carte affiché. Peut être défini sur: standard ou streetview. S'il n'est pas spécifié, les paramètres d'application actuels seront utilisés.
  • views: active/désactive des vues spécifiques. Peut être défini sur: satellite, traffic ou transit. Plusieurs valeurs peuvent être définies à l'aide d'un séparateur de virgules. Si le paramètre est spécifié sans valeur, il effacera toutes les vues.
  • zoom: spécifie le niveau de zoom de la carte.

Et comme le dit le techtheatre, vous pouvez utiliser un lien régulier Apple Maps pour déclencher Apple Maps:

//maps.Apple.com/?q=Raleigh,NC

En laissant le protocole sélectionnera automatiquement le bon à utiliser, donc si vous vouliez avoir un lien dynamique, vous pourriez simplement créer du code conditionnel qui change le lien entre google.com et Apple.com selon le système sur lequel vous vous trouvez.

37
Alex W

En fait ... maintenant que Apple a sa propre application de carte, ils n'attrapent plus les liens Google maps et ne les acheminent pas dans l'application de cartographie (par défaut ... bien que cela puisse être modifié sur l'appareil En tant que tel, vous devez maintenant faire quelques reniflements pour déterminer si l'appareil est Android ou Apple. Si vous utilisez le lien correct pour le système d'exploitation mobile correct, l'appareil va saisir l'intention et à la place d'utiliser le navigateur, ira dans l'application de cartographie.

Si Android, liez comme ceci:

https://maps.google.com/?q=Houston,+TX

Si Apple, liez comme ceci:

http://maps.Apple.com/?q=Houston,+TX

C'est certainement une douleur, et j'espère que le W3c finira par normaliser un déclencheur de carte (comme tel: pour les numéros de téléphone). Bonne chance!

15
techtheatre

Voici ma solution jQuery pour ce problème. Je voulais pouvoir détecter la bonne carte à ouvrir. En 2019, les microformats ne font toujours pas automatiquement de lien pour les téléphones mobiles.

J'ai utilisé la solution de cet article https://medium.com/@colinlord/opening-native-map-apps-from-the-mobile-browser-afd66fbbb8a4 mais l'ai modifiée pour la rendre actuelle et dynamique.

Et, modifié le code afin que je puisse avoir un bloc d'adresse dans mon html. Cette adresse est supprimée des bases et envoyée à l'application de cartes appropriée.

HTML

<span class="map-link">6555 Hollywood Blvd<br/>Hollywood, CA 90028</span>

Javascript

$(document).on('click','.map-link',function() {
    var address = $(this).html();
    address = $('<div/>')
      .html(address)
      .text() // strip tags
      .replace(/\s\s+/g, " "); // remove spaces
    address = encodeURIComponent(address);
    if ((navigator.platform.indexOf('iPhone') != -1) || (navigator.platform.indexOf('iPad') != -1) || (navigator.platform.indexOf('iPod') != -1)){/* if we're on iOS, open in Apple Maps */
        window.open('http://maps.Apple.com/?q=' + address);
    } else { /* else use Google */
        window.open('https://maps.google.com/maps?q=' + address);
    }
});

CSS

.map-link { text-decoration: underline; text-decoration-style: dotted;cursor: pointer ;}
.map-link:hover { text-decoration-style:solid;}
1
Scot Nery

Pas besoin de quoi que ce soit de fantaisie. Vous pouvez simplement lier l'adresse comme ceci.

<a href='https://maps.google.com/?q=addressgoeshere'>
  <a href='https://maps.Apple.com/maps?q=addressgoeshere'>
    Address</a></a>

Sur Android cela ouvrira l'application Google maps, et sur iOS cela ouvrira Apple maps app. (Non testé sur Windows phone))

0
Vincent