cordova plugin googlemaps
Version 1.3.9
| Download | Teste de construção (ramificação multiple_maps) |
|---|---|
Este plugin exibe o Google Maps em seu aplicativo. Este plugin usa estas bibliotecas para cada plataforma:
Tanto PhoneGap quanto Apache Cordova são suportados.
Android, iOS | Navegador |
$> cordova plugin add cordova-plugin-googlemaps
Em seguida, defina as chaves da API do Google Maps em seu 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 plataforma de 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)
A versão do SDK do Google Play Services. Você precisa especificar o mesmo número de versão com todos os outros plug-ins. Confira a versão mais recente aqui.
ANDROID_SUPPORT_V4_VERSION = (27.1.1)
Este plugin requer a biblioteca de suporte Android v4. A versão mínima é 24.1.0. Confira a versão mais recente aqui.
LOCATION_WHEN_IN_USE_DESCRIPTION
Esta mensagem é exibida quando seu aplicativo solicita PERMISSÃO DE LOCALIZAÇÃO apenas para os horários necessários .
LOCATION_ALWAYS_USAGE_DESCRIPTION
Esta mensagem é exibida quando seu aplicativo solicita PERMISSÃO DE LOCAÇÃO para sempre .
Para manter este plugin gratuito, considere doar uma pequena quantia para este projeto.
v2.7.1
v2.7.0
UIWebView no iOS. Somente WKWebView .map.stopAnimation()map.setDiv(null)Demonstração (navegador)
Todas as documentações estão aqui!!
https://github.com/mapsplugin/cordova-plugin-googlemaps-doc/blob/master/v2.6.0/README.md
Exemplos rápidos
 Mapa | var opções = {
câmera: {
alvo: {lat: ..., lng: ...},
ampliação: 19
}
};
var mapa = plugin.google.maps.Map.getMap(mapDiv, opções) |
 Marcador | var marcador = map.addMarker({
posição: {lat: ..., lng: ...},
título: "Olá Cordova Google Maps para iOS e Android",
snippet: "Este plugin é incrível!"
}) |
 MarcadorCluster | var marcadorCluster = map.addMarkerCluster({
//maxZoomLevel: 5,
limitesDraw: verdadeiro,
marcadores: dummyData(),
ícones: [
{min: 2, max: 100, url: "./img/blue.png", âncora: {x: 16, y: 16}},
{min: 100, max: 1000, url: "./img/yellow.png", âncora: {x: 16, y: 16}},
{min: 1000, max: 2000, url: "./img/purple.png", âncora: {x: 24, y: 24}},
{min: 2000, url: "./img/red.png", âncora: {x: 32,y: 32}}
]
}); |
 HtmlInfoWindow | var html = "<img src='./House-icon.png' largura='64' altura='64' >" +
"<br>" +
“Este é um exemplo”;
htmlInfoWindow.setContent(html);
htmlInfoWindow.open(marcador);
|
 Círculo | var círculo = map.addCircle({
'centro': {lat: ..., lng: ...},
'raio': 300,
'strokeColor': '#AA00FF',
'largura do curso': 5,
'fillColor': '#880000'
}); |
 Polilinha | var polilinha = map.addPolyline({
pontos: AIR_PORTS,
'cor': '#AA00FF',
'largura': 10,
'geodésico': verdadeiro
}); |
 Polígono | var polígono = map.addPolygon({
'pontos': GORYOKAKU_POINTS,
'strokeColor': '#AA00FF',
'largura do curso': 5,
'fillColor': '#880000'
}); |
 Sobreposição de solo | var groundOverlay = map.addGroundOverlay({
'url': "./newark_nj_1922.jpg",
'limites': [
{"lat": 40,712216, "lng": -74,22655},
{"lat": 40,773941, "lng": -74,12544}
],
'opacidade': 0,5
});
|
 TileOverlay | var tileOverlay = map.addTileOverlay({
depuração: verdadeiro,
opacidade: 0,75,
getTile: função(x, y, zoom) {
retornar "../images/map-for-free/" + zoom + "_" + x + "-" + y + ".gif"
}
}); |
 KmlOverlay | map.addKmlOverlay({
'url': 'polígono.kml'
}, função(kmlOverlay) {... }); |
 Geocodificador | plugin.google.maps.Geocoder.geocode({
// Capitais dos EUA
"endereço": [
"Montgomery, AL, EUA", ... "Cheyenne, Wyoming, EUA"
]
}, função(mvcArray) {... }); |
 utilitário poli | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41.79883, lng: 140.75673}
]
var contém = plugin.google.maps.geometry.poly.containsLocation(
posição, GORYOKAKU_POINTS);
marcador.setIcon(conter? "azul": "vermelho");
|
 utilitário de codificação | var GORYOKAKU_POINTS = [
{lat: 41.79883, lng: 140.75675},
...
{lat: 41.79883, lng: 140.75673}
]
var encodedPath = plugin.google.maps.geometry.
codificação.encodePath(GORYOKAKU_POINTS);
|
 utilidade esférica | var cabeçalho = plugin.google.maps.geometry.spherical.computeHeading(
marcadorA.getPosition(), marcadorB.getPosition());
label.innerText = "título: " + cabeçalho.toFixed(0) + "°";
|
 Serviço de localização | plugin.google.maps.LocationService.getMyLocation(função(resultado) {
alert(["Sua localização atual:n",
"latitude:" + localização.latLng.lat.toFixed(3),
"longitude:" + location.latLng.lng.toFixed(3),
"velocidade:" + localização.velocidade,
"hora:" + localização.hora,
"rolamento:" + location.rolamento].join("n"));
});
|
 Vista da rua | var div = document.getElementById("pano_canvas1");
var panorama = plugin.google.maps.StreetView.getPanorama(div, {
câmera: {
alvo: {lat: 42.345573, lng: -71.098326}
}
}); |
A API JavaScript v3 do Google Maps funciona em qualquer plataforma, mas não funciona se o dispositivo estiver off-line .
Este plugin usa três APIs diferentes:
Em aplicativos Android e iOS, este plug-in exibe visualizações nativas do Google Maps, que são mais rápidas que a API JavaScript v3 do Google Maps. E funciona até mesmo se o dispositivo estiver offline .
Na plataforma do navegador, este plugin exibe visualizações de mapas JS (Google Maps JavaScript API v3). Deve funcionar como PWA (aplicativo web progressivo), mas o dispositivo precisa estar online .
Para funcionar em todas as plataformas, este plugin fornece API própria em vez de cada API original. Você pode escrever seu código similar to API JavaScript v3 do Google Maps.
Tabela de comparação de recursos
| API JavaScript do Google Maps v3 | Cordova-Plugin-GoogleMaps(Android,iOS) | Cordova-Plugin-GoogleMaps (navegador) | |
|---|---|---|---|
| Sistema de renderização | Javascript + HTML | JavaScript + APIs nativas | JavaScript |
| Mapa off-line | Não é possível | Possível (apenas sua área exibida) | Não é possível |
| Visualização 3D | Não é possível | Possível | Não é possível |
| Plataforma | Todos os navegadores | Somente aplicativos Android e iOS | Todos os navegadores |
| Imagem lado a lado | Mapa de bits | Vetor | Mapa de bits |
Tabela de comparação de classes
| API JavaScript do Google Maps v3 | Cordova-Plugin-GoogleMaps |
|---|---|
| google.maps.Map | Mapa |
| google.maps.Marker | Marcador |
| google.maps.InfoWindow | InfoWindow padrão e HtmlInfoWindow |
| google.maps.Círculo | Círculo |
| google.maps.Retângulo | Polígono |
| google.maps.Polyline | Polilinha |
| google.maps.Polígono | Polígono |
| google.maps.GroundOverlay | Sobreposição de solo |
| google.maps.ImageMapType | TileOverlay |
| google.maps.MVCObject | Classe Base |
| google.maps.MVCArray | ClasseBaseArray |
| google.maps.Geocoder | plugin.google.maps.geocoder |
| google.maps.geometry.spherical | plugin.google.maps.geometry.spherical |
| google.maps.geometry.encoding | plugin.google.maps.geometry.encoding |
| google.maps.geometry.poly | plugin.google.maps.geometry.poly |
| (não disponível) | MarcadorCluster |
| google.maps.KmlLayer | KmlOverlay |
| (não disponível) | Serviço de localização |
| google.maps.StreetView | Vista da rua |
| google.maps.Dados | (não disponível) |
| google.maps.DirectionsService | (não disponível) |
| google.maps.DistanceMatrixService | (não disponível) |
| google.maps.TransitLayer | (não disponível) |
| google.maps.places.* | (não disponível) |
| google.maps.visualization.* | (não disponível) |
Este plugin gera visualizações de mapas nativas e as coloca no navegador .
As visualizações do mapa não são elementos HTML. Isso significa que eles não são <div> nem nada relacionado a HTML. Mas você pode especificar o tamanho e a posição da visualização do mapa usando <div> .
Este plugin altera o plano de fundo para transparent em seu aplicativo. Em seguida, o plugin detecta sua posição de toque, que se destina ao native map ou a um html element (que pode estar no topo do seu mapa ou em qualquer outro lugar da tela).
O benefício deste plugin é a capacidade de detectar automaticamente quais elementos HTML estão ou não no mapa.
Por exemplo, na imagem abaixo, digamos que você toque no div do cabeçalho (que fica acima da visualização do mapa). O plugin detectará se o seu toque é para o div do cabeçalho ou para a visualização do mapa e então passará o evento de toque apropriadamente.
Isso significa que você pode usar as visualizações nativas do Google Maps semelhantes aos elementos HTML .
Gitter: (gerenciado por @Hirbod)
https://gitter.im/nightstomp/cordova-plugin-googlemaps
