web-dev-qa-db-fra.com

Android Phonegap - Comment ouvrir l'application native Google Maps

Je travaille sur une application Android utilisant Phonegap et j'ai du mal à trouver comment ouvrir l'application native Google Maps pour afficher les directions. Je n'ai aucun problème à ouvrir une carte en insérant un L'URL mais l'ouverture de l'application m'ont bloqué. Jusqu'à présent, je n'ai pu trouver que des suggestions liées à Phonegap pour le développement sur la plate-forme iOS.

J'ai ajouté Google Maps aux autorisations de la liste blanche, j'inclus le fichier Cordova.js correct et le lien google maps dans ma balise de script, j'ai les autorisations correctes dans mon fichier AndroidManifest.xml, inclus Cordova.jar et l'API Google Map dans mon chemin de génération , avoir le dossier Phonegap xml dans le répertoire res, le fichier js dans mon répertoire assets/www, le fichier jar dans le répertoire libs.

Ce que j'essaie d'accomplir:

    1. Lorsqu'un lien est cliqué, ouvrez l'application native de Google Maps. Si l'application n'est pas installée sur l'appareil, informez l'utilisateur que Google Maps n'est pas installé et doit être installé.
      une. Je vérifie déjà la connectivité réseau et gère cela comme il se doit.
    2. Google Maps s'ouvre et affiche les directions de l'emplacement actuel de l'utilisateur à l'emplacement du lien cliqué.

L'exemple ci-dessous fonctionne sur mon Android exactement la même chose que sur iOS, mais n'ouvre évidemment pas les actions de l'application Google Maps.

<a> href="http://maps.google.com/maps?q=TD Washington DC"><img src="img/ico_pin.png" />White House</a></a>

Le deuxième exemple s'ajoute au premier en incluant l'emplacement de fin même si je n'ai pas réussi à comprendre comment insérer l'emplacement actuel. Plus important encore, il n'ouvre toujours pas l'application Google Maps.

<a href="javascript:openMaps('daddr=1600+Pennsylvania+Ave+NW+Washington+DC+20500+USA');"><img src="img/ico_pin.png" />White House</a>

function openMaps(querystring) {
    var maproot = '';
    maproot = 'http://maps.google.com/maps?saddr=Current+Location&';
    window.location = maproot + querystring;
}

Dans le troisième exemple ci-dessous, je peux afficher une carte dans mon application. Il montre le bon itinéraire (à partir d'une vue aérienne du point A au point B) mais n'ouvre pas à nouveau l'application Google Maps réelle.

<a id="whDirections" href="#mm_directions" onclick="getDirections()">
                    <img src="img/ico_pin.png" />White House</a>

<div data-role="content">
    <div class="ui-bar-c ui-corner-all ui-shadow" style="padding: 1em;">
        <div id="mapdirections_canvas" style="height: 300px;"></div>
    </div>
</div>

function getDirections() {
    var directionsService = new google.maps.DirectionsService();
    var map;
    var directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
        zoom: 9,
        zoomControl: true,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById("mapdirections_canvas"), mapOptions);
    directionsDisplay.setMap(map);

    var myLatLng = new google.maps.LatLng(gmmLat, gmmLong);
    if (document.getElementById("whDirections")) {
        var request = {
            Origin: myLatLng,
        destination: new google.maps.LatLng(38.897096, -77.036545), 
            travelMode: google.maps.TravelMode.DRIVING
    };
    directionsService.route(request, function(result, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(result); 
        }
    });
}

Si quelqu'un a un lien ou une idée à ce sujet, j'apprécierais vraiment l'aide. Autre qu'une application "Hello World", c'est ma première application mobile. S'il vous plaît, faites-moi savoir si j'ai raté quelque chose ou si je fais tout simplement mal Si des informations supplémentaires sont nécessaires, veuillez me le faire savoir.

Merci d'avance pour l'aide.

javascriptandroidgoogle-mapscordovageolocation
17
Brian

Utilisez le geo: tapez uri.

<a href="geo:38.897096,-77.036545">open map</a>

et l'utilisateur aura le choix d'ouvrir l'une des applications de cartographie installées sur son appareil.

58
Simon MacDonald

Ce travail pour moi ...

var addressLongLat = yourLatitude+','+yourLongitude

Pour Android Maps App:

window.open("geo:"+addressLongLat);

Pour l'application iOs Maps:

window.open("http://maps.Apple.com/?q="+addressLongLat, '_system');

Pour Google Maps dans le navigateur d'application:

window.open("http://maps.google.com/?q="+addressLongLat, '_system');
15
Carlos Galeano

Pour toutes les versions de phonegap/cordova ou navigateur Web. Il sera Google map application native.

Pour la navigation de l'emplacement actuel vers q - window.open ("google.navigation: q = 23.3728831,85.3372199 & mode = d", '_system');

Pour la recherche - window.open ("geo: 0,0? Q = pizza", '_system');

Lire ici - https://developers.google.com/maps/documentation/Android/intents

6
Aditya Raj

Lancer Navigator Cordova/Phonegap Plugin peut être utilisé pour naviguer vers une destination en utilisant l'application de navigation native sur: -

  1. Android: Google Navigator
  2. iOS: Apple Maps/Google Maps
  3. Windows Phone: Bing Maps
2
Dhaval Jivani

Si vous souhaitez simplement ouvrir l'application Maps native en utilisant l'adresse au lieu de la latitude et de la longitude, voici une solution simple qui fonctionne pour Android et iOS:

function openNativeMapsApp(address) {

    console.log('Opening the native maps app...');

    var maps_schema;

    // Replace the following "if" line to your own way of identifying the system (Android or ios)
    if ( app.device.Android ) {
        maps_schema = encodeURI('geo://?q=' + address);
        window.open(maps_schema, "_system");
    } else {
        maps_schema = encodeURI('maps://?q=' + address);
        window.location.href = maps_schema;
    }
}

Assurez-vous d'avoir ces lignes dans votre fichier config.xml:

<allow-intent href="maps:*" />
<access Origin="maps:*" launch-external="yes" />

Les lignes ci-dessous sont "spécifiques à Android". Cela peut provoquer un conflit avec iOS si vous ne les placez pas dans le <platform name="Android> tag:

<platform name="Android">
    <access Origin="*" />
    <allow-navigation href="*" />
    ...
</platform>
0
David Toledo

Voici ce que j'utilise:

function (lat, lon) {
    var latLon = lat + ',' + lon;

    if (device.platform.toUpperCase() === "Android") {
        window.open("geo:" + latLon, "_system");
    } else if (device.platform.toUpperCase() === "IOS") {
        window.open("http://maps.Apple.com/?sll=" + latLon + "&z=100&t=k", "_system");
    }
}

Remarque: lorsque vous ouvrez Apple, les sll=... Et t=k, Ce qui signifie que je spécifie une longitude et une latitude exactes, et t=k signifie que je veux Apple pour afficher les images satellites. De plus, je n'écris que pour iOS et Android, donc si vous utilisez d'autres plates-formes, assurez-vous de vérifier explicitement pour chacune! Je suis je suis sûr que le geo: d'Android fonctionne toujours comme prévu, mais je peux me tromper. N'oubliez pas: testez tout sur un vrai appareil!

0
Will Brickner