cordova plugin googlemaps
Version 1.3.9
| Descargar | Prueba de compilación (rama multiple_maps) |
|---|---|
Este complemento muestra Google Maps en su aplicación. Este complemento utiliza estas bibliotecas para cada plataforma:
Se admiten tanto PhoneGap como Apache Cordova.
Android, iOS | Navegador |
$> cordova plugin add cordova-plugin-googlemaps
Luego configure sus claves API de Google Maps en su 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 >Para la plataforma del navegador,
// 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 versión del SDK de servicios de Google Play. Debe especificar el mismo número de versión con todos los demás complementos. Consulte la última versión aquí.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Este complemento requiere la biblioteca de soporte de Android v4. La versión mínima es 24.1.0. Consulte la última versión aquí.
LOCATION_WHEN_IN_USE_DESCRIPTION
Este mensaje se muestra cuando su aplicación solicita PERMISO DE UBICACIÓN sólo para los momentos necesarios .
LOCATION_ALWAYS_USAGE_DESCRIPTION
Este mensaje se muestra cuando su aplicación solicita PERMISO DE UBICACIÓN para siempre .
Para mantener este complemento gratuito, considere donar una pequeña cantidad para este proyecto.
v2.7.1
v2.7.0
UIWebView en iOS. Solo WKWebView .map.stopAnimation()map.setDiv(null)Demostración (navegador)
¡¡Todas las documentaciones están aquí!!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Ejemplos rápidos
 Mapa | opciones de var = {
cámara: {
objetivo: {lat: ..., lng: ...},
zoom: 19
}
};
var mapa = plugin.google.maps.Map.getMap(mapDiv, opciones) |
 Marcador | marcador var = mapa.addMarker({
posición: {lat: ..., lng: ...},
título: "Hola Cordova Google Maps para iOS y Android",
fragmento: "¡Este complemento es increíble!"
}) |
 Grupo de marcadores | var marcadorCluster = map.addMarkerCluster({
//maxZoomLevel: 5,
límitesDibujar: verdadero,
marcadores: dummyData(),
iconos: [
{min: 2, max: 100, url: "./img/blue.png", ancla: {x: 16, y: 16}},
{min: 100, max: 1000, url: "./img/amarillo.png", ancla: {x: 16, y: 16}},
{min: 1000, max: 2000, url: "./img/purple.png", ancla: {x: 24, y: 24}},
{min: 2000, url: "./img/red.png", ancla: {x: 32,y: 32}}
]
}); |
 VentanaHtmlInfo | var html = "<img src='./House-icon.png' ancho='64' alto='64' >" +
"<br>" +
"Este es un ejemplo";
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marcador);
|
 Círculo | var círculo = mapa.addCircle({
'centro': {lat: ..., lng: ...},
'radio': 300,
'Color de trazo': '#AA00FF',
'ancho de trazo': 5,
'color de relleno': '#880000'
}); |
 Polilínea | var polilínea = map.addPolyline({
puntos: AIR_PORTS,
'color': '#AA00FF',
'ancho': 10,
'geodésico': verdadero
}); |
 Polígono | var polígono = mapa.addPolygon({
'puntos': GORYOKAKU_POINTS,
'color de trazo': '#AA00FF',
'ancho de trazo': 5,
'color de relleno': '#880000'
}); |
 Superposición de suelo | var sueloOverlay = mapa.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'límites': [
{"latitud": 40.712216, "larga": -74.22655},
{"lat": 40.773941, "lng": -74.12544}
],
'opacidad': 0,5
});
|
 Superposición de mosaicos | var mosaicoOverlay = map.addTileOverlay({
depuración: verdadero,
opacidad: 0,75,
getTile: función(x, y, zoom) {
devolver "../imagenes/mapa-gratis/" + zoom + "_" + x + "-" + y + ".gif"
}
}); |
 KmlSuperposición | mapa.addKmlOverlay({
'url': 'polígono.kml'
}, función (kmlOverlay) {...}); |
 Geocodificador | complemento.google.maps.Geocoder.geocode({
// Capitales de EE. UU.
"DIRECCIÓN": [
"Montgomery, AL, EE. UU.", ... "Cheyenne, Wyoming, EE. UU."
]
}, función (mvcArray) {...}); |
 utilidad polivinílica | var GORYOKAKU_POINTS = [
{latitud: 41.79883, lengua: 140.75675},
...
{latitud: 41.79883, lengua: 140.75673}
]
var contiene = plugin.google.maps.geometry.poly.containsLocation(
posición, GORYOKAKU_POINTS);
marcador.setIcon(contiene? "azul": "rojo");
|
 utilidad de codificación | var GORYOKAKU_POINTS = [
{latitud: 41.79883, lengua: 140.75675},
...
{latitud: 41.79883, lengua: 140.75673}
]
var rutacodificada = plugin.google.maps.geometry.
codificación.encodePath(GORYOKAKU_POINTS);
|
 utilidad esférica | var encabezado = plugin.google.maps.geometry.spherical.computeHeading(
marcadorA.getPosition(), marcadorB.getPosition());
label.innerText = "encabezado: " + encabezado.toFixed(0) + "°";
|
 Servicio de localización | plugin.google.maps.LocationService.getMyLocation(función(resultado) {
alert(["Su ubicación actual:n",
"latitud:" + ubicación.latLng.lat.toFixed(3),
"longitud:" + ubicación.latLng.lng.toFixed(3),
"velocidad:" + ubicación.velocidad,
"hora:" + ubicación.hora,
"rumbo:" + ubicación.rumbo].join("n"));
});
|
 Vista de calle | var div = document.getElementById("pano_canvas1");
var panorama = plugin.google.maps.StreetView.getPanorama(div, {
cámara: {
objetivo: {latitud: 42.345573, longitud: -71.098326}
}
}); |
La API v3 de JavaScript de Google Maps funciona en cualquier plataforma, pero no funciona si el dispositivo está fuera de línea .
Este complemento utiliza tres API diferentes:
En aplicaciones de Android e iOS, este complemento muestra vistas nativas de Google Maps, que es más rápido que la API JavaScript de Google Maps v3. E incluso funciona si el dispositivo está fuera de línea .
En la plataforma del navegador, este complemento muestra vistas de mapas JS (Google Maps JavaScript API v3). Debería funcionar como PWA (aplicación web progresiva), pero el dispositivo tiene que estar online .
Para funcionar en todas las plataformas, este complemento proporciona su propia API en lugar de cada API original. Puede escribir su código similar to la API JavaScript v3 de Google Maps.
Tabla de comparación de características
| API de JavaScript de Google Maps v3 | Cordova-Plugin-GoogleMaps (Android, iOS) | Cordova-Plugin-GoogleMaps (navegador) | |
|---|---|---|---|
| Sistema de renderizado | Javascript + HTML | JavaScript + API nativas | javascript |
| Mapa sin conexión | No es posible | Posible (solo su área mostrada) | No es posible |
| Vista 3D | No es posible | Posible | No es posible |
| Plataforma | Todos los navegadores | Solo aplicaciones de Android e iOS | Todos los navegadores |
| Imagen de mosaico | mapa de bits | Vector | mapa de bits |
tabla de comparación de clases
| API de JavaScript de Google Maps v3 | Cordova-Plugin-GoogleMaps |
|---|---|
| google.maps.Mapa | Mapa |
| google.maps.Marcador | Marcador |
| google.maps.InfoWindow | Ventana de información predeterminada y ventana de información HTML |
| google.maps.Círculo | Círculo |
| google.maps.Rectángulo | Polígono |
| google.maps.Polilínea | Polilínea |
| google.maps.Polígono | Polígono |
| google.maps.GroundOverlay | Superposición de suelo |
| google.maps.ImageMapType | Superposición de mosaicos |
| google.maps.MVCObjeto | Clase base |
| google.maps.MVCArray | BaseArrayClass |
| google.maps.Geocodificador | complemento.google.maps.geocoder |
| google.maps.geometría.esférica | plugin.google.maps.geometry.esférico |
| google.maps.geometry.codificación | complemento.google.maps.geometry.encoding |
| google.maps.geometría.poly | complemento.google.maps.geometry.poly |
| (No disponible) | Grupo de marcadores |
| google.maps.KmlLayer | KmlSuperposición |
| (No disponible) | UbicaciónServicio |
| google.maps.StreetView | Vista de calle |
| google.maps.datos | (No disponible) |
| google.maps.DirectionsService | (No disponible) |
| google.maps.DistanceMatrixService | (No disponible) |
| google.maps.TransitLayer | (No disponible) |
| google.maps.places.* | (No disponible) |
| google.maps.visualización.* | (No disponible) |
Este complemento genera vistas de mapas nativas y las coloca en el navegador .
Las vistas del mapa no son elementos HTML. Esto significa que no son un <div> ni nada relacionado con HTML. Pero puede especificar el tamaño y la posición de la vista del mapa utilizando su <div> contenedor.
Este complemento cambia el fondo a transparent en su aplicación. Luego, el complemento detecta su posición táctil, que está destinada al native map o a un html element (que puede estar en la parte superior de su mapa o en cualquier otro lugar de la pantalla).
El beneficio de este complemento es la capacidad de detectar automáticamente qué elementos HTML están sobre el mapa o no.
Por ejemplo, en la imagen a continuación, digamos que toca el div del encabezado (que se encuentra sobre la vista del mapa). El complemento detectará si su toque es para el div del encabezado o para la vista del mapa y luego pasará el evento táctil de manera adecuada.
Esto significa que puede utilizar las vistas nativas de Google Maps similares a los elementos HTML .
Gitter: (gestionado por @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
