cordova plugin googlemaps
Version 1.3.9
| Télécharger | Test de build (branche multiple_maps) |
|---|---|
Ce plugin affiche Google Maps dans votre application. Ce plugin utilise ces bibliothèques pour chaque plateforme :
PhoneGap et Apache Cordova sont pris en charge.
Android, iOS | Navigateur |
$> cordova plugin add cordova-plugin-googlemaps
Définissez ensuite vos clés API Google Maps dans votre config.xml (Android / iOS).
< widget ...>
< preference name = " GOOGLE_MAPS_ANDROID_API_KEY " value = " (api key) " />
< preference name = " GOOGLE_MAPS_IOS_API_KEY " value = " (api key) " />
</ widget >Pour la plateforme de navigateur,
// If your app runs this program on browser,
// you need to set `API_KEY_FOR_BROWSER_RELEASE` and `API_KEY_FOR_BROWSER_DEBUG`
// before `plugin.google.maps.Map.getMap()`
//
// API_KEY_FOR_BROWSER_RELEASE for `https:` protocol
// API_KEY_FOR_BROWSER_DEBUG for `http:` protocol
//
plugin . google . maps . environment . setEnv ( {
'API_KEY_FOR_BROWSER_RELEASE' : '(YOUR_API_KEY_IS_HERE)' ,
'API_KEY_FOR_BROWSER_DEBUG' : '' // optional
} ) ;
// Create a Google Maps native view under the map_canvas div.
var map = plugin . google . maps . Map . getMap ( div ) ; < widget ...>
<!--
You need to specify cli-7.1.0 or greater version.
https://build.phonegap.com/current-support
-->
< preference name = " phonegap-version " value = " cli-8.1.1 " />
</ widget > GOOGLE_MAPS_PLAY_SERVICES_VERSION = (16.0.1)
La version du SDK des services Google Play. Vous devez spécifier le même numéro de version avec tous les autres plugins. Découvrez la dernière version ici.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Ce plugin nécessite la bibliothèque de support Android v4. La version minimale est 24.1.0. Découvrez la dernière version ici.
LOCATION_WHEN_IN_USE_DESCRIPTION
Ce message s'affiche lorsque votre application demande une AUTORISATION DE LOCALISATION uniquement pour les périodes nécessaires .
LOCATION_ALWAYS_USAGE_DESCRIPTION
Ce message s'affiche lorsque votre application demande une AUTORISATION DE LOCALISATION pour toujours .
Afin de garder ce plugin gratuit, pensez à faire un petit don pour ce projet.
v2.7.1
v2.7.0
UIWebView sur iOS. WKWebView uniquement.map.stopAnimation()map.setDiv(null)Démo (navigateur)
Toutes les documentations sont ici !!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Exemples rapides
 Carte | options var = {
caméra: {
cible : {lat : ..., lng : ...},
zoom: 19
}
} ;
var map = plugin.google.maps.Map.getMap(mapDiv, options) |
 Marqueur | var marqueur = map.addMarker({
position : {lat : ..., lng : ...},
titre : "Bonjour Cordova Google Maps pour iOS et Android",
extrait : « Ce plugin est génial ! »
}) |
 Cluster de marqueurs | var marqueurCluster = map.addMarkerCluster({
//maxZoomNiveau : 5,
limitesDraw : vrai,
marqueurs : dummyData(),
icônes : [
{min : 2, max : 100, url : "./img/blue.png", ancre : {x : 16, y : 16}},
{min : 100, max : 1000, url : "./img/jaune.png", ancre : {x : 16, y : 16}},
{min : 1000, max : 2000, url : "./img/purple.png", ancre : {x : 24, y : 24}},
{min : 2000, url : "./img/red.png",ancre : {x : 32,y : 32}}
]
}); |
 FenêtreInfoHtml | var html = "<img src='./House-icon.png' width='64' height='64' >" +
"<br>" +
« Ceci est un exemple » ;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marqueur);
|
 Cercle | var cercle = map.addCircle({
'centre' : {lat : ..., lng : ...},
'rayon' : 300,
'StrokeColor' : '#AA00FF',
'largeur de trait' : 5,
'fillColor' : '#880000'
}); |
 Polyligne | var polyline = map.addPolyline({
points : AIR_PORTS,
'couleur' : '#AA00FF',
'largeur' : 10,
'géodésique' : vrai
}); |
 Polygone | var polygone = map.addPolygon({
'points' : GORYOKAKU_POINTS,
'StrokeColor' : '#AA00FF',
'largeur de trait' : 5,
'fillColor' : '#880000'
}); |
 Superposition au sol | var groundOverlay = map.addGroundOverlay({
'url' : "./newark_nj_1922.jpg",
'limites' : [
{"lat": 40.712216, "lng": -74.22655},
{"lat": 40.773941, "lng": -74.12544}
],
'opacité' : 0,5
});
|
 Superposition de tuiles | var tuileOverlay = map.addTileOverlay({
débogage : vrai,
opacité : 0,75,
getTile : fonction (x, y, zoom) {
retourner "../images/map-for-free/" + zoom + "_" + x + "-" + y + ".gif"
}
}); |
 KmlSuperposition | map.addKmlOverlay({
'url' : 'polygone.kml'
}, fonction(kmlOverlay) { ... }); |
 Géocodeur | plugin.google.maps.Geocoder.geocode({
// Capitales américaines
"adresse": [
"Montgomery, AL, États-Unis", ... "Cheyenne, Wyoming, États-Unis"
]
}, fonction(mvcArray) { ... }); |
 utilitaire poly | var GORYOKAKU_POINTS = [
{lat : 41.79883, lng : 140.75675},
...
{lat : 41.79883, lng : 140.75673}
]
var contient = plugin.google.maps.geometry.poly.containsLocation(
position, GORYOKAKU_POINTS);
marqueur.setIcon(contain ? "bleu" : "rouge");
|
 utilitaire d'encodage | var GORYOKAKU_POINTS = [
{lat : 41.79883, lng : 140.75675},
...
{lat : 41.79883, lng : 140.75673}
]
var encodedPath = plugin.google.maps.geometry.
encoding.encodePath(GORYOKAKU_POINTS);
|
 utilité sphérique | var en-tête = plugin.google.maps.geometry.spherical.computeHeading(
marqueurA.getPosition(), marqueurB.getPosition());
label.innerText = "titre : " + titre.toFixed(0) + "°";
|
 Service de localisation | plugin.google.maps.LocationService.getMyLocation(function(result) {
alert(["Votre position actuelle :n",
"latitude :" + location.latLng.lat.toFixed(3),
"longitude :" + location.latLng.lng.toFixed(3),
"vitesse :" + localisation.vitesse,
"heure :" + emplacement.heure,
"relèvement :" + location.bearing].join("n"));
});
|
 StreetView | var div = document.getElementById("pano_canvas1");
var panorama = plugin.google.maps.StreetView.getPanorama(div, {
caméra: {
cible : {lat : 42.345573, lng : -71.098326}
}
}); |
L'API JavaScript de Google Maps v3 fonctionne sur toutes les plates-formes, mais elle ne fonctionne pas si l'appareil est hors ligne .
Ce plugin utilise trois API différentes :
Dans les applications Android et iOS, ce plugin affiche les vues natives de Google Maps, ce qui est plus rapide que l'API JavaScript de Google Maps v3. Et cela fonctionne même si l'appareil est hors ligne .
Dans la plateforme du navigateur, ce plugin affiche les vues cartographiques JS (API JavaScript Google Maps v3). Il devrait fonctionner comme PWA (application Web progressive), mais l'appareil doit être en ligne .
Afin de fonctionner sur toutes les plateformes, ce plugin fournit sa propre API au lieu de chaque API d'origine. Vous pouvez écrire votre code similar to l'API JavaScript de Google Maps v3.
Tableau de comparaison des fonctionnalités
| API JavaScript de Google Maps v3 | Cordova-Plugin-GoogleMaps (Android, iOS) | Cordova-Plugin-GoogleMaps (Navigateur) | |
|---|---|---|---|
| Système de rendu | Javascript + HTML | JavaScript + API natives | Javascript |
| Carte hors ligne | Pas possible | Possible (uniquement votre zone affichée) | Pas possible |
| Vue 3D | Pas possible | Possible | Pas possible |
| Plate-forme | Tous les navigateurs | Applications Android et iOS uniquement | Tous les navigateurs |
| Image de tuile | Bitmap | Vecteur | Bitmap |
Tableau de comparaison des classes
| API JavaScript de Google Maps v3 | Cordova-Plugin-GoogleMaps |
|---|---|
| google.maps.Map | Carte |
| google.maps.Marker | Marqueur |
| google.maps.InfoWindow | InfoWindow par défaut et HtmlInfoWindow |
| google.maps.Circle | Cercle |
| google.maps.Rectangle | Polygone |
| google.maps.Polyline | Polyligne |
| google.maps.Polygone | Polygone |
| google.maps.GroundOverlay | Superposition au sol |
| google.maps.ImageMapType | Superposition de tuiles |
| google.maps.MVCObject | Classe de base |
| google.maps.MVCArray | ClasseBaseArray |
| google.maps.Geocoder | plugin.google.maps.geocoder |
| google.maps.geometry.sphérique | plugin.google.maps.geometry.sphérique |
| google.maps.geometry.encoding | plugin.google.maps.geometry.encoding |
| google.maps.geometry.poly | plugin.google.maps.geometry.poly |
| (pas disponible) | Cluster de marqueurs |
| google.maps.KmlLayer | KmlSuperposition |
| (pas disponible) | LocalisationService |
| google.maps.StreetView | StreetView |
| google.maps.Data | (pas disponible) |
| google.maps.DirectionsService | (pas disponible) |
| google.maps.DistanceMatrixService | (pas disponible) |
| google.maps.TransitLayer | (pas disponible) |
| google.maps.places.* | (pas disponible) |
| google.maps.visualisation.* | (pas disponible) |
Ce plugin génère des vues cartographiques natives et les place sous le navigateur .
Les vues cartographiques ne sont pas des éléments HTML. Cela signifie qu'il ne s'agit pas d'un <div> ou de quoi que ce soit lié au HTML. Mais vous pouvez spécifier la taille et la position de la vue cartographique en utilisant son contenu <div> .
Ce plugin change l'arrière-plan en transparent dans votre application. Ensuite, le plugin détecte votre position tactile, qui est soit destinée à la native map , soit à un html element (qui peut être au-dessus de votre carte, ou n'importe où ailleurs sur l'écran).
L'avantage de ce plugin est la possibilité de détecter automatiquement quels éléments HTML se trouvent ou non sur la carte.
Par exemple, dans l'image ci-dessous, disons que vous appuyez sur l'en-tête div (qui se trouve au-dessus de la vue cartographique). Le plugin détectera si votre appui est destiné au div d'en-tête ou à la vue cartographique, puis transmettra l'événement tactile de manière appropriée.
Cela signifie que vous pouvez utiliser les vues natives de Google Maps similaires aux éléments HTML .
Gitter : (géré par @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
