Diferencia entre revisiones de «PDM Avanzado GoogleMaps»
| (No se muestran 48 ediciones intermedias del mismo usuario) | |||
| Línea 18: | Línea 18: | ||
<gallery caption="Descargando imaxe Google Api e actualizando un emulador" widths="350" heights="300px" perrow="2"> | <gallery caption="Descargando imaxe Google Api e actualizando un emulador" widths="350" heights="300px" perrow="2"> | ||
Image:PDM_Avanzada_GoogleMap_1.JPG| Abrimos o SDK Manager. | Image:PDM_Avanzada_GoogleMap_1.JPG| Abrimos o SDK Manager. | ||
| − | Image:PDM_Avanzada_GoogleMap_2.JPG| Prememos a opción 'Show Package Detail' e descargamos, na versión de Android que nos interese, o Google Api e Google Intel/Arm System Image [ | + | Image:PDM_Avanzada_GoogleMap_2.JPG| Prememos a opción 'Show Package Detail' e descargamos, na versión de Android que nos interese, o Google Api e Google Intel/Arm System Image ([http://wiki.cifprodolfoucha.es/index.php?title=Introduci%C3%B3n_a_Android:_Versi%C3%B3ns,_APIS_e_SDK#Versi.C3.B3ns_e_APIS intel ou arm dependerá do computador que teñamos]). |
| + | Image:PDM_Avanzada_GoogleMap_3_a.JPG| Abrimos o AVD Manager. | ||
Image:PDM_Avanzada_GoogleMap_3.JPG| Neste exemplo modificamos un dos xa creados. Poderíamos crear un novo. | Image:PDM_Avanzada_GoogleMap_3.JPG| Neste exemplo modificamos un dos xa creados. Poderíamos crear un novo. | ||
| − | Image: | + | Image:PDM_Avanzada_GoogleMap_3.JPG| Seleccionamos a imaxe Google que descargamos previamente. |
</gallery> | </gallery> | ||
| − | |||
| − | + | No caso de [http://wiki.cifprodolfoucha.es/index.php?title=Facendo_a_pr%C3%A1ctica_cunha_m%C3%A1quina_virtual utilizar a máquina de VirtualBox entregada para este curso], isto non será necesario. | |
| − | + | ==Importación de Google Play Services ao noso proxecto== | |
| + | |||
| + | Debemos de engadir a librería de Google Play Services ao noso proxecto. | ||
| + | |||
| + | Para facelo: | ||
| + | |||
| + | <gallery caption="Importación dos Google Play Services" widths="350" heights="300px" perrow="2"> | ||
| + | Image:PDM_Avanzada_GoogleMap_5A.JPG | Abrimos o SDK Manager e engadimos (se xa non está engadida) a opción: '''Google play services'''. | ||
| + | Image:PDM_Avanzada_GoogleMap_5.JPG | Estando na vista 'Android' (parte superior) abrimos o arquivo '''build.gradle''' <u>'''do módulo APP'''</u>. | ||
| + | Image:PDM_Avanzada_GoogleMap_6.JPG| Engadimos a liña: implementation 'com.google.android.gms:play-services:9.0.2' cambiando os últimos número pola versión de play services que queiramos. Podemos consulta cal é a última [https://developers.google.com/android/guides/releases neste enlace]. | ||
| + | Image:PDM_Avanzada_GoogleMap_7.JPG | Unha vez gardado prememos a opción '''Sync now''' na parte superior dereita. | ||
| + | </gallery> | ||
| + | |||
| + | |||
| + | A partires da versión 6.5 de Google Play Services podemos indicar que 'partes' queremos compilar. No noso caso, poderíamos cambiar a liña anterior por esta: | ||
| + | |||
| + | <u>Nota:</u> Deberes adaptalo á versión actual. Podedes consultar a lista actualizada [https://developers.google.com/android/guides/setup#add_google_play_services_to_your_project neste enlace]. | ||
| + | <syntaxhighlight lang="java" line enclose="div"> | ||
| + | implement 'com.google.android.gms:play-services-maps:9.0.2' | ||
| + | </syntaxhighlight> | ||
| − | |||
| − | + | Podemos ver nesta imaxe as opcións que dispoñemos e poder elixir aqueles servizos que nos interese: | |
| − | + | [[Imagen:PDM_Avanzada_GoogleMap_9.JPG | 400px]] | |
| − | + | Información obtida de https://developers.google.com/android/guides/setup#add_google_play_services_to_your_project | |
| − | |||
| − | |||
| − | + | Mais información no [https://developers.google.com/android/guides/api-client#using_the_wearable_api_stand-alone seguinte enlace] | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| Línea 68: | Línea 75: | ||
android:name="com.google.android.gms.version" | android:name="com.google.android.gms.version" | ||
android:value="@integer/google_play_services_version" /> | android:value="@integer/google_play_services_version" /> | ||
| + | |||
............ | ............ | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| Línea 91: | Línea 99: | ||
GooglePlayServicesUtil.getErrorDialog(resultCode, this, 0).show(); | GooglePlayServicesUtil.getErrorDialog(resultCode, this, 0).show(); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
| + | '''<u>IMPORTANTE:</u>''' É necesario que a versión que poñamos no noso proxecto sexa inferior ou igual que a que ten o dispositivo onde imos a executar a aplicación. En caso contrario, pedirá no dispositivo a necesidade de actualizar a versión de Google Play Services, e se o facemos dende un dispositivo virtual non funcionará... | ||
| + | |||
| + | ==Actualizacións (Update) de Google Play Services== | ||
| + | |||
| + | Pode suceder que o noso dispositivo/emulador non teña a versión de Google Play Services que estamos a indicar. <br /> | ||
| + | Se a nosa versión é superior ao da versión do dispositivo non pasa nada.<br /> | ||
| + | Se a nosa versión é inferior á versión instalada no emulador / dispositivo temos dúas posibilidades: | ||
| + | :* Actualizar á versión indicada. | ||
| + | :* Cambiar o número de versión do arquivo '''build.gradle''' pola versión do noso dispositivo/emulador. | ||
| + | |||
| + | Para saber que versión temos, debemos ir a: | ||
| + | |||
| + | <gallery caption="Obtendo a versión de Google Play Services" widths="350" heights="300px" perrow="2"> | ||
| + | Image:PDM_Avanzada_GoogleMap_14.JPG| Imos a '''Settings''' do noso dispositivo. | ||
| + | Image:PDM_Avanzada_GoogleMap_15.JPG| Escollemos a opción '''Apps'''. | ||
| + | Image:PDM_Avanzada_GoogleMap_16.JPG| Escollemos a aplicación '''Google Play Services'''. | ||
| + | Image:PDM_Avanzada_GoogleMap_17.JPG| Na parte superior podemos comprobar a versión do Google Play Services. | ||
| + | </gallery> | ||
| + | |||
| + | : Pode suceder que cando poñades esa versión, o Android Studio non a atope. Para comprobar as versións que podedes poñer, teremos que ir ao cartafol onde se atopa instalado o sdk e dentro deste a /Cartafol_SDK/extras/google/m2repository/com/google/android/gms/play-services | ||
| + | |||
| + | ::[[Image:PDM_Avanzada_GoogleMap_12.JPG|300px]] | ||
| + | |||
| + | |||
| + | Unha vez cambiada a versión lembrar premer a opción '''Sync''' da parte superior-dereito do Android Studio. | ||
| + | |||
| + | ::[[Image:PDM_Avanzada_GoogleMap_7.JPG|300px]] | ||
| + | |||
| + | |||
| + | |||
| + | '''Nota:''' Se non tedes o Google Play Repository, ao poñer unha versión non descargada vos dará un erro o proxecto, e na parte inferior-esquerda vos aparecerá unha mensaxe coa opción de descargar dito repositorio.... | ||
| + | ::[[Image:PDM_Avanzada_GoogleMap_11.JPG|300px]] | ||
| + | |||
| + | ==Creando un proxecto novo cun Google Map== | ||
| + | |||
| + | * En Android Studio podemos crear un proxecto preparado para facer uso dun mapa de Google Maps. | ||
| + | |||
| + | : Para iso: | ||
| + | |||
| + | <gallery caption="Creando un proxecto cunha Activity que visualice un Google Maps" widths="350" heights="300px" perrow="2"> | ||
| + | Image:PDM_Avanzada_GoogleMap_18.JPG| Creamos un novo proxecto. | ||
| + | Image:PDM_Avanzada_GoogleMap_19.jpg| Indicamos o nome do novo proxecto. | ||
| + | Image:PDM_Avanzada_GoogleMap_20.jpg| Indicamos o target API do S.O. Android. | ||
| + | Image:PDM_Avanzada_GoogleMap_21.jpg| Indicamos o tipo de Activity a crear. Neste caso '''Google Maps Activity'''. | ||
| + | Image:PDM_Avanzada_GoogleMap_22.jpg| Indicamos o nome da Actiivty principal. | ||
| + | </gallery> | ||
| + | |||
| + | |||
| + | |||
| + | |||
==Xeración das API KEYS== | ==Xeración das API KEYS== | ||
| − | Para poder utilizar un mapa de Google necesitamos xerar unha Key dende a consola de Google. Para ser máis concretos imos necesitar xerar dúas Keys, unha para facer procesos de debugger (cando estamos a desenrolar a aplicación | + | Para poder utilizar un mapa de Google necesitamos xerar unha Key dende a consola de Google. Para ser máis concretos imos necesitar xerar dúas Keys, unha para facer procesos de debugger (cando estamos a desenrolar a aplicación) e outra xa definitiva para cando xeremos o APK que será entregado ou descargado polos usuarios da nosa aplicación. |
===Obtención da pegada dixital SHA1=== | ===Obtención da pegada dixital SHA1=== | ||
| Línea 106: | Línea 165: | ||
=====Graficamente===== | =====Graficamente===== | ||
| − | <gallery caption=" | + | :'''Opción a)''' |
| − | Image: | + | |
| − | Image: | + | ::<gallery caption="" widths="350" heights="300px" perrow="2"> |
| + | Image:PDM_Avanzada_GoogleMap_26.jpg| Debemos premer na parte dereita do Android Studio sobre a icona de '''Gradle'''. Ao facelo, aparecerá a venta que amosa a imaxe. Debemos refrescar a despois premer dúas veces sobre a opción '''Signing report''' do voso proxecto (root). | ||
| + | Image:PDM_Avanzada_GoogleMap_27.jpg| Ao facer o paso anterior xerarase na parte inferior dereita o resultado no que se amosa a pegada dixital '''SHA1''' (lembrar premer sobre a opción '''Gradle Consola''' para ver os resultados. | ||
</gallery> | </gallery> | ||
| + | |||
| + | |||
| + | ::'''Nota:''' Lembrar cambiar a configuración de execución para que execute o noso proxecto: | ||
| + | |||
| + | ::[[Image:PDM_Avanzada_GoogleMap_30.jpg|300px]] | ||
| + | |||
| + | :'''Opción b)''' | ||
| + | |||
| + | :* Editar o arquivo '''/res/values/google_maps_api.xml''' | ||
| + | |||
| + | :: [[Image:PDM_Avanzada_GoogleMap_28.jpg|300px]] | ||
=====Dende consola===== | =====Dende consola===== | ||
| Línea 136: | Línea 208: | ||
Esta a obteremos cando a aplicación estea rematada e xeremos o apk a entregar ós usuarios. | Esta a obteremos cando a aplicación estea rematada e xeremos o apk a entregar ós usuarios. | ||
| − | Esta parte está contemplada na [http:// | + | Esta parte está contemplada na [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Avanzado_Empaquetado_e_distribuci%C3%B3n#Obtendo_a_pegada_dixital_SHA1_dun_almac.C3.A9n_para_utilizar_con_GoogleMap Unidade de empaquetado e distribución]. |
| + | |||
| + | ===Obtención da API KEY=== | ||
| + | |||
| + | |||
| + | : Unha vez temos a pegada dixital, temos que acceder ó sitio web indicado no arquivo '''/res/values/google_maps_api.xml''' ('''cambiando os XXXXXXX polo SHA1 de produción ou de depuración''') | ||
| + | |||
| + | :<syntaxhighlight lang="xml" line enclose="div" highlight="3" > | ||
| + | To get one, follow this link, follow the directions and press "Create" at the end: | ||
| + | |||
| + | https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend&keyType=CLIENT_SIDE_ANDROID&r=0EXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:74%3Bcom.example.angel.olamundo | ||
| + | |||
| + | </syntaxhighlight> | ||
| + | * '''IMPORTANTE:''' Debemos ter coidado coa versión na que estamos a desenvolver a aplicación xa que imos ter dos arquivos '''google_maps_api.xml''': | ||
| + | :* release : app\src\release\res\values\google_maps_api.xml | ||
| + | :* debug : app\src\debug\res\values\google_maps_api.xml | ||
| − | = | + | : Polo tanto cando cambiemos de 'debug' a 'release' teremos que poñer a Api key outra vez. |
| + | : Lembrar que vimos [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Avanzado_Empaquetado_e_distribuci%C3%B3n#Modificando_a_versi.C3.B3n_compilada_de_debug_a_release neste enlace da wiki] como cambiar dunha versión a outra. | ||
| − | |||
<u>Nota:</u> Solicitará entrar cunha conta de gmail. Se non a temos teremos que rexistrarnos e crear unha nova. | <u>Nota:</u> Solicitará entrar cunha conta de gmail. Se non a temos teremos que rexistrarnos e crear unha nova. | ||
| + | |||
O proceso é o seguinte: | O proceso é o seguinte: | ||
<gallery caption="Obtención da API KEY" widths="400" heights="400px" perrow="2"> | <gallery caption="Obtención da API KEY" widths="400" heights="400px" perrow="2"> | ||
| − | Image: | + | Image:PDM_Avanzada_GoogleMap_23.jpg| Debemos premer o botón de '''Create Proyect'''. |
| − | Image: | + | Image:PDM_Avanzada_GoogleMap_24.jpg| Debemos premer o botón de '''Ir a las credenciales'''. |
| − | Image: | + | Image:PDM_Avanzada_GoogleMap_25.jpg| Nesta paso imos crear unha nova Clave de Android. Dentro desta clave podemos engadir varias aplicacións. Simplemente teremos que poñer na parte esquerda o nome do paquete do noso proxecto e na parte da dereita o SHA1 obtida do paso anterior. Lembrar que o nome do paquete o tedes no AndroidManifiest.xml (<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="'''com.example.angel.mapa'''"). '''Prememos o botón Crear'''. |
| − | + | Image:PDM_Avanzada_GoogleMap_29.jpg| Agora no listado aparece a nova API KEY. Agora podemos editar esta nova clave de Google e engadir novas aplicacións e que utilicen a mesma API Key. | |
| − | |||
| − | |||
| − | Image: | ||
</gallery> | </gallery> | ||
| Línea 162: | Línea 247: | ||
:Lembrar que se queremos entregar a aplicación aos usuarios (xerar o APK) debemos de obter e utilizar a API KEY '''a partires da SHA1 de produción''', como indicamos [http://manuais.iessanclemente.net/index.php/PDM_Avanzado_GoogleMaps#Obtenci.C3.B3n_da_pegada_dixital_SHA1_Produci.C3.B3n neste enlace]. | :Lembrar que se queremos entregar a aplicación aos usuarios (xerar o APK) debemos de obter e utilizar a API KEY '''a partires da SHA1 de produción''', como indicamos [http://manuais.iessanclemente.net/index.php/PDM_Avanzado_GoogleMaps#Obtenci.C3.B3n_da_pegada_dixital_SHA1_Produci.C3.B3n neste enlace]. | ||
| − | :O lóxico é que primeiro xeredes unha API KEY | + | :O lóxico é que primeiro xeredes unha API KEY (cando se está a facer probas). Como xa está xerada a API KEY o único que teredes que facer é editar quen ten acceso a utilizar esa api key premendo o botón 'Editar Aplicaciones Android Permitidas'. Nese intre teredes que poñer o SHA1 obtido do voso almacén de claves ([http://manuais.iessanclemente.net/index.php/PDM_Avanzado_Empaquetado_e_distribuci%C3%B3n#Obtendo_a_pegada_dixital_SHA1_dun_almac.C3.A9n_para_utilizar_con_GoogleMap obtención da SHA1]). |
| + | |||
| + | * Unha vez temos a API KEY debemos de modificar o arquivo '''google_maps_api.xml''': | ||
| + | |||
| + | :[[Image:PDM_Avanzada_GoogleMap_31.jpg|400px]] | ||
==Permisos necesarios e uso da nova API KEY== | ==Permisos necesarios e uso da nova API KEY== | ||
Para poder utilizar GoogleMap debemos modificar o arquivo '''AndroidManifiest.xml''' coas seguintes entradas: | Para poder utilizar GoogleMap debemos modificar o arquivo '''AndroidManifiest.xml''' coas seguintes entradas: | ||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
* Debemos engadir os seguintes permisos: | * Debemos engadir os seguintes permisos: | ||
| Línea 266: | Línea 341: | ||
Se facemos todos os pasos indicados teremos como resultado algo parecido a isto: | Se facemos todos os pasos indicados teremos como resultado algo parecido a isto: | ||
| − | [[Imagen: | + | [[Imagen:PDM_Avanzada_GoogleMap_32.jpg|400px|center]] |
| Línea 310: | Línea 385: | ||
Faremos uso da [http://developer.android.com/reference/com/google/android/gms/maps/GoogleMap.html clase GoogleMap]: | Faremos uso da [http://developer.android.com/reference/com/google/android/gms/maps/GoogleMap.html clase GoogleMap]: | ||
| − | * Para referenciar o mapa: | + | * Para referenciar o mapa, debemos facer uso da interface '''onMapReadyCallback''': |
| + | |||
| + | <syntaxhighlight lang="java" line enclose="div" highlight="1" > | ||
| + | public class MainActivity extends Activity implements OnMapReadyCallback { | ||
| + | |||
| + | } | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| + | :Ao implementar dita interface xerase automaticamente o seguinte código: | ||
| + | <syntaxhighlight lang="java" line enclose="div" highlight="8" > | ||
| + | import com.google.android.gms.maps.GoogleMap; | ||
| + | |||
| + | private GoogleMap googleMap; | ||
| − | + | @Override | |
| − | + | public void onMapReady(GoogleMap googleMap) { | |
| − | + | googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap(); | |
| − | + | } | |
</syntaxhighlight> | </syntaxhighlight> | ||
| − | |||
| − | <syntaxhighlight lang="java" line enclose="div" highlight="" > | + | : Para que chame a este método temos que facer uso do '''método getMapAsync''' da clase MapFragment. Nalgún sitio da Activity (normalmente no método onCreate) chamaremos a este método: |
| − | + | ||
| + | <syntaxhighlight lang="java" line enclose="div" highlight="8" > | ||
| + | ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMapAsync(this); | ||
| + | </syntaxhighlight> | ||
| + | |||
| + | |||
| − | + | * Se necesitamos que o GoogleMap funcione en versións anteriores á API 12 (Android 3.1) teremos que refencialo desta forma, facendo uso da librería de compatibilidade v4: | |
| − | + | <syntaxhighlight lang="java" line enclose="div" highlight="8" > | |
| + | ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMapAsync(this); | ||
</syntaxhighlight> | </syntaxhighlight> | ||
| + | |||
| Línea 377: | Línea 471: | ||
: Tamén podemos obter o zoom, orientación e ángulo accedendo ás propiedades zoom, bearing e tilt. | : Tamén podemos obter o zoom, orientación e ángulo accedendo ás propiedades zoom, bearing e tilt. | ||
| − | |||
==Marcas no Mapa== | ==Marcas no Mapa== | ||
| Línea 383: | Línea 476: | ||
Outra das aplicacións que pode ter o uso de GoogleMap é indicar mediante iconas, posicións concretas do mapa no que alberguemos certa información. | Outra das aplicacións que pode ter o uso de GoogleMap é indicar mediante iconas, posicións concretas do mapa no que alberguemos certa información. | ||
| − | [[Imagen: | + | [[Imagen:PDM_Avanzada_GoogleMap_33.jpg | 400px |center]] |
Isto o conseguimos coas clases [https://developer.android.com/intl/es/reference/com/google/android/gms/maps/model/Marker.html Marker] e [http://developer.android.com/intl/es/reference/com/google/android/gms/maps/model/MarkerOptions.html MarkerOptions]. | Isto o conseguimos coas clases [https://developer.android.com/intl/es/reference/com/google/android/gms/maps/model/Marker.html Marker] e [http://developer.android.com/intl/es/reference/com/google/android/gms/maps/model/MarkerOptions.html MarkerOptions]. | ||
| Línea 435: | Línea 528: | ||
Algunhas veces pode sernos de utilizade 'unir' diferentes marcas no mapa (para indicar unha ruta por exemplo). | Algunhas veces pode sernos de utilizade 'unir' diferentes marcas no mapa (para indicar unha ruta por exemplo). | ||
| − | [[Imagen: | + | [[Imagen:PDM_Avanzada_GoogleMap_34.jpg|300px|center]] |
| + | |||
| + | Para facelo podemos empregar a [https://developer.android.com/intl/es/reference/com/google/android/gms/maps/model/PolygonOptions.html clase PolygonOptions]. | ||
| + | |||
| + | |||
| + | <u>'''Nota:'''</u> Este tipo de liña crea unha figura 'pechada' entre os puntos que a conforman. Se queremos marcar rutas podemos empregar a [https://developers.google.com/android/reference/com/google/android/gms/maps/model/Polyline clase Polyline]. Máis información [https://developers.google.com/maps/documentation/android-sdk/shapes neste enlace]. | ||
| − | |||
Esta clase dispón do método add no que se lle pasa a posición a engadir (en forma de obxecto da clase LatLng). | Esta clase dispón do método add no que se lle pasa a posición a engadir (en forma de obxecto da clase LatLng). | ||
| Línea 474: | Línea 571: | ||
| − | [[Imagen: | + | [[Imagen:PDM_Avanzada_GoogleMap_35.jpg|500px|center]] |
* Como funciona a práctica: | * Como funciona a práctica: | ||
| Línea 491: | Línea 588: | ||
===IMPORTANTE: Aspectos a ter en conta para que funcione este práctica=== | ===IMPORTANTE: Aspectos a ter en conta para que funcione este práctica=== | ||
| − | * Se estamos a utilizar un AVD temos que utilizar un que | + | * Se estamos a utilizar un AVD temos que utilizar un que teña como imaxe unha 'Google API' como indicamos neste punto: [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Avanzado_GoogleMaps#Aclaraci.C3.B3n_sobre_o_dispositivo_virtual_android_.28AVD.29 Aclaración sobre o dispositivo virtual android (AVD)] |
| − | * Necesitaremos xerar unha API KEY para o voso eclipse e proxecto como vimos neste punto: [http:// | + | * Necesitaremos xerar unha API KEY para o voso eclipse e proxecto como vimos neste punto: [http://wiki.cifprodolfoucha.es/index.php?title=PDM_Avanzado_GoogleMaps#Xeraci.C3.B3n_das_API_KEYS Obtención da API KEY]. |
| − | * Unha vez obtida debemos de escribila no sitio correspondente do arquivo | + | * Unha vez obtida debemos de escribila no sitio correspondente do arquivo '''google_maps_api.xml''' en /res/values |
| − | + | ===Creamos a activity === | |
| − | |||
| − | ===Creamos a activity=== | ||
* Nome do proxecto: '''UD10_02_Mapa''' | * Nome do proxecto: '''UD10_02_Mapa''' | ||
| Línea 561: | Línea 656: | ||
'''Código da clase UD10_02_Mapa'''<br/> | '''Código da clase UD10_02_Mapa'''<br/> | ||
'''Obxectivo:''' Traballar cun mapa de Google Map utilizando marcas. | '''Obxectivo:''' Traballar cun mapa de Google Map utilizando marcas. | ||
| − | <syntaxhighlight lang="java" line enclose="div" highlight="22-24,35,46,58-69,81-100,107- | + | <syntaxhighlight lang="java" line enclose="div" highlight="22-24,35,46,58-69,81-100,107-124,132" > |
import java.util.ArrayList; | import java.util.ArrayList; | ||
| Línea 581: | Línea 676: | ||
import com.google.android.gms.maps.model.PolygonOptions; | import com.google.android.gms.maps.model.PolygonOptions; | ||
| − | |||
| − | + | public class UD10_02_Mapa extends Activity implements OnMapReadyCallback { | |
| − | + | private GoogleMap googleMapa; | |
| − | + | private Marker marcaActual; | |
| − | + | private ArrayList<LatLng>marcas; | |
| − | + | ||
| − | + | private void xestionarEventos(){ | |
| − | + | ||
| − | + | Button btnSatelite = (Button)findViewById(R.id.UD10_02_btnSatelite); | |
| − | + | btnSatelite.setOnClickListener(new OnClickListener() { | |
| − | + | ||
| − | + | @Override | |
| − | + | public void onClick(View arg0) { | |
| − | + | // TODO Auto-generated method stub | |
| − | + | ||
| − | + | googleMapa.setMapType(GoogleMap.MAP_TYPE_SATELLITE); | |
| − | + | ||
| − | + | } | |
| − | + | }); | |
| − | + | Button btnTerrestre = (Button)findViewById(R.id.UD10_02_btnTerrestre); | |
| − | + | btnTerrestre.setOnClickListener(new OnClickListener() { | |
| − | + | ||
| − | + | @Override | |
| − | + | public void onClick(View arg0) { | |
| − | + | // TODO Auto-generated method stub | |
| − | + | ||
| − | + | googleMapa.setMapType(GoogleMap.MAP_TYPE_TERRAIN); | |
| − | + | ||
| − | + | } | |
| − | + | }); | |
| − | + | ||
| − | + | Button btnMover = (Button) findViewById(R.id.UD10_02_btnMover); | |
| + | btnMover.setOnClickListener(new OnClickListener() { | ||
| + | |||
| + | @Override | ||
| + | public void onClick(View arg0) { | ||
| + | // TODO Auto-generated method stub | ||
| + | |||
| + | if (marcaActual != null) | ||
| + | marcaActual.remove(); | ||
| + | |||
| + | marcaActual = googleMapa.addMarker(new MarkerOptions() | ||
| + | .position(googleMapa.getCameraPosition().target) | ||
| + | .title("TI") | ||
| + | .snippet( | ||
| + | "Ti nesta posición:" | ||
| + | + googleMapa.getCameraPosition().target | ||
| + | .toString()) | ||
| + | .icon(BitmapDescriptorFactory | ||
| + | .fromResource(R.drawable.common_ic_googleplayservices))); | ||
| + | |||
| + | } | ||
| + | }); | ||
| + | |||
| + | Button btnMarcar = (Button)findViewById(R.id.UD10_02_btnMarcar); | ||
| + | btnMarcar.setOnClickListener(new OnClickListener() { | ||
| + | |||
| + | @Override | ||
| + | public void onClick(View arg0) { | ||
| + | // TODO Auto-generated method stub | ||
| + | |||
| + | marcas.add(googleMapa.getCameraPosition().target); | ||
| + | |||
| + | PolygonOptions polOpt = new PolygonOptions(); | ||
| + | for (LatLng lugar : marcas){ | ||
| + | polOpt.add(lugar); | ||
| + | } | ||
| + | polOpt.strokeColor(Color.BLUE); | ||
| + | |||
| + | googleMapa.clear(); | ||
| + | googleMapa.addPolygon(polOpt); | ||
| + | |||
| + | marcaActual = googleMapa.addMarker(new MarkerOptions() | ||
| + | .position(googleMapa.getCameraPosition().target) | ||
| + | .title("TI") | ||
| + | .snippet( | ||
| + | "Ti nesta posición:" | ||
| + | + googleMapa.getCameraPosition().target | ||
| + | .toString()) | ||
| + | .icon(BitmapDescriptorFactory | ||
| + | .fromResource(R.drawable.common_ic_googleplayservices))); | ||
| + | |||
| + | } | ||
| + | }); | ||
| + | |||
| + | } | ||
| + | |||
| + | @Override | ||
| + | public void onMapReady(GoogleMap googleMap) { | ||
| + | this.googleMapa = googleMap; | ||
| + | |||
| + | LatLng pos = new LatLng(42.879985, -8.544855); // Posición de Santiago de Compostela | ||
| + | |||
| + | marcaActual = googleMapa.addMarker(new MarkerOptions() | ||
| + | .position(pos) | ||
| + | .title("TI") | ||
| + | .snippet("Ti nesta posición:" + pos.toString()) | ||
| + | .icon(BitmapDescriptorFactory.fromResource(R.drawable.common_ic_googleplayservices)) | ||
| + | ); | ||
| − | + | googleMapa.moveCamera(CameraUpdateFactory.newLatLngZoom(marcaActual.getPosition(),16)); | |
| − | |||
| − | |||
| − | + | xestionarEventos(); | |
| − | |||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | @Override | |
| − | + | protected void onCreate(Bundle savedInstanceState) { | |
| − | + | super.onCreate(savedInstanceState); | |
| − | + | setContentView(R.layout.activity_ud10_02__mapa); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | marcas = new ArrayList<LatLng>(); | |
| − | + | ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMapAsync(this); | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | + | } | |
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
| − | |||
} | } | ||
| Línea 720: | Línea 815: | ||
:* Liñas 92-100: Agregamos unha nova icona (marca) na posición actual da cámara. | :* Liñas 92-100: Agregamos unha nova icona (marca) na posición actual da cámara. | ||
| − | * Liñas 107- | + | * Liñas 107-123: Obtén unha referencia ó mapa e crea unha marca (icona) en Santiago de Compostela. Chamado automaticamente cando facemos uso do método getMapAsync da clase MapFragment. |
| − | :* Liña | + | :* Liña 108: Obtén unha referencia ó mapa. |
| − | :* Liñas | + | :* Liñas 112-117: Crea unha marca (icona) en Santiago de Compostela. |
| − | :* Liña | + | :* Liña 119: Move a cámara do mapa á posición da marca cun zoom de 15. |
| + | :* Liña 121: Engadimos a xestión de eventos aos botóns. | ||
| + | |||
| + | * Liña 130: Indicamos que cando o mapa estea preparado chame automaticamente ao método onMapReady da interface. | ||
| − | <br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- ( | + | <br> -- [[Usuario:angelfg|Ángel D. Fernández González]] e [[Usuario:Carrion|Carlos Carrión Álvarez]] -- (Actualizado 2016). |
Revisión actual del 17:20 18 jun 2019
Sumario
- 1 Introdución
- 2 Importación de Google Play Services ao noso proxecto
- 3 Actualizacións (Update) de Google Play Services
- 4 Creando un proxecto novo cun Google Map
- 5 Xeración das API KEYS
- 6 Permisos necesarios e uso da nova API KEY
- 7 Renderizado do MAPA
- 8 Manexo do Mapa
- 9 Marcas no Mapa
- 10 Liñas no Mapa
- 11 Caso Práctico
Introdución
Neste punto imos aprender como debuxar e controlar un Mapa de GoogleMaps.
Debido a que o control que debuxa o mapa fai uso dun MapFragment e esta clase foi introducida a partires da API 12 (Android 3.1) teremos dúas formas de utilizalo dependendo da API mínima ó que vaia dirixida a nosa aplicación.
Para poder utilizar un Google Map necesitaremos:
- Google Play services (a aplicación debe estar instalada no dispositivo real. Isto xa se fai automaticamente a partires da versión 2.3).
- Google Maps API key: Unha clave que nos proporciona Google e que ten estar posta no AndroidManifiest.xml. Para ser exactos imos necesitar dúas. Unha para a versión de desenrolo e outra para cando xeremos o APK.
- Unha serie de permisos a engadir no AndroidManifiest.xml
Aclaración sobre o dispositivo virtual android (AVD)
Para poder utilizar o mapa nun AVD é necesario descargar unha imaxe que sexa Google API. Podemos crear un novo AVD ou modificar un das xa creados. Neste exemplo actualizaremos un.
- Descargando imaxe Google Api e actualizando un emulador
Prememos a opción 'Show Package Detail' e descargamos, na versión de Android que nos interese, o Google Api e Google Intel/Arm System Image (intel ou arm dependerá do computador que teñamos).
No caso de utilizar a máquina de VirtualBox entregada para este curso, isto non será necesario.
Importación de Google Play Services ao noso proxecto
Debemos de engadir a librería de Google Play Services ao noso proxecto.
Para facelo:
- Importación dos Google Play Services
Engadimos a liña: implementation 'com.google.android.gms:play-services:9.0.2' cambiando os últimos número pola versión de play services que queiramos. Podemos consulta cal é a última neste enlace.
A partires da versión 6.5 de Google Play Services podemos indicar que 'partes' queremos compilar. No noso caso, poderíamos cambiar a liña anterior por esta:
Nota: Deberes adaptalo á versión actual. Podedes consultar a lista actualizada neste enlace.
1 implement 'com.google.android.gms:play-services-maps:9.0.2'
Podemos ver nesta imaxe as opcións que dispoñemos e poder elixir aqueles servizos que nos interese:
Información obtida de https://developers.google.com/android/guides/setup#add_google_play_services_to_your_project
Mais información no seguinte enlace
A maiores debemos engadir o seguinte permiso no arquivo AndroidManifiest.xml:
- Dentro da entrada <application>:
1 <application 2 android:allowBackup="true" 3 android:icon="@drawable/ic_launcher" 4 android:label="@string/app_name" 5 android:theme="@style/AppTheme" > 6 7 <meta-data 8 android:name="com.google.android.gms.version" 9 android:value="@integer/google_play_services_version" /> 10 11 ............
Para saber por código se un dispositivo ten o Google Play Service:
1 int resultCode =GooglePlayServicesUtil.isGooglePlayServicesAvailable(this);
2
3 if (ConnectionResult.SUCCESS != resultCode) {
4
5 // Neste caso ou non ten instalado o Google Play Services ou necesita actualizarse,...
6 }
En caso de erro podemos descubrir que pasa:
1 GooglePlayServicesUtil.getErrorDialog(resultCode, this, 0).show();
IMPORTANTE: É necesario que a versión que poñamos no noso proxecto sexa inferior ou igual que a que ten o dispositivo onde imos a executar a aplicación. En caso contrario, pedirá no dispositivo a necesidade de actualizar a versión de Google Play Services, e se o facemos dende un dispositivo virtual non funcionará...
Actualizacións (Update) de Google Play Services
Pode suceder que o noso dispositivo/emulador non teña a versión de Google Play Services que estamos a indicar.
Se a nosa versión é superior ao da versión do dispositivo non pasa nada.
Se a nosa versión é inferior á versión instalada no emulador / dispositivo temos dúas posibilidades:
- Actualizar á versión indicada.
- Cambiar o número de versión do arquivo build.gradle pola versión do noso dispositivo/emulador.
Para saber que versión temos, debemos ir a:
- Obtendo a versión de Google Play Services
- Pode suceder que cando poñades esa versión, o Android Studio non a atope. Para comprobar as versións que podedes poñer, teremos que ir ao cartafol onde se atopa instalado o sdk e dentro deste a /Cartafol_SDK/extras/google/m2repository/com/google/android/gms/play-services
Unha vez cambiada a versión lembrar premer a opción Sync da parte superior-dereito do Android Studio.
Nota: Se non tedes o Google Play Repository, ao poñer unha versión non descargada vos dará un erro o proxecto, e na parte inferior-esquerda vos aparecerá unha mensaxe coa opción de descargar dito repositorio....
Creando un proxecto novo cun Google Map
- En Android Studio podemos crear un proxecto preparado para facer uso dun mapa de Google Maps.
- Para iso:
- Creando un proxecto cunha Activity que visualice un Google Maps
Xeración das API KEYS
Para poder utilizar un mapa de Google necesitamos xerar unha Key dende a consola de Google. Para ser máis concretos imos necesitar xerar dúas Keys, unha para facer procesos de debugger (cando estamos a desenrolar a aplicación) e outra xa definitiva para cando xeremos o APK que será entregado ou descargado polos usuarios da nosa aplicación.
Obtención da pegada dixital SHA1
Un paso necesario para obter esa Key é obter a pegada dixital.
Como comentamos antes imos ter dúas, unha mentres estamos a desenrolar a aplicación e outra para cando teñamos a aplicación rematada e lista para entregar ós usuarios.
Obtención da pegada dixital SHA1 Depuración
Graficamente
- Opción a)
- Nota: Lembrar cambiar a configuración de execución para que execute o noso proxecto:
- Opción b)
- Editar o arquivo /res/values/google_maps_api.xml
Dende consola
Esta información tamén se pode obter dende unha consola ou terminal. En Windows é mellor utilizar unha consola con permisos administrativos (executar como administrador).
Debemos situarnos coa orde cd (se non o temos no path) no cartafol onde estea instalado o JDK e dentro deste no cartafol /bin/.
Nese cartafol se atopa o executable keytool.
- LINUX:
1 ./keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
- WINDOWS:
1 keytool -list -v -keystore "%USERPROFILE%\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
Obtención da pegada dixital SHA1 Produción
Esta a obteremos cando a aplicación estea rematada e xeremos o apk a entregar ós usuarios.
Esta parte está contemplada na Unidade de empaquetado e distribución.
Obtención da API KEY
- Unha vez temos a pegada dixital, temos que acceder ó sitio web indicado no arquivo /res/values/google_maps_api.xml (cambiando os XXXXXXX polo SHA1 de produción ou de depuración)
1 To get one, follow this link, follow the directions and press "Create" at the end: 2 3 https://console.developers.google.com/flows/enableapi?apiid=maps_android_backend&keyType=CLIENT_SIDE_ANDROID&r=0EXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:74%3Bcom.example.angel.olamundo
- IMPORTANTE: Debemos ter coidado coa versión na que estamos a desenvolver a aplicación xa que imos ter dos arquivos google_maps_api.xml:
- release : app\src\release\res\values\google_maps_api.xml
- debug : app\src\debug\res\values\google_maps_api.xml
- Polo tanto cando cambiemos de 'debug' a 'release' teremos que poñer a Api key outra vez.
- Lembrar que vimos neste enlace da wiki como cambiar dunha versión a outra.
Nota: Solicitará entrar cunha conta de gmail. Se non a temos teremos que rexistrarnos e crear unha nova.
O proceso é o seguinte:
- Obtención da API KEY
Nesta paso imos crear unha nova Clave de Android. Dentro desta clave podemos engadir varias aplicacións. Simplemente teremos que poñer na parte esquerda o nome do paquete do noso proxecto e na parte da dereita o SHA1 obtida do paso anterior. Lembrar que o nome do paquete o tedes no AndroidManifiest.xml (<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.example.angel.mapa"). Prememos o botón Crear.
Nota Importante:
- Lembrar que se queremos entregar a aplicación aos usuarios (xerar o APK) debemos de obter e utilizar a API KEY a partires da SHA1 de produción, como indicamos neste enlace.
- O lóxico é que primeiro xeredes unha API KEY (cando se está a facer probas). Como xa está xerada a API KEY o único que teredes que facer é editar quen ten acceso a utilizar esa api key premendo o botón 'Editar Aplicaciones Android Permitidas'. Nese intre teredes que poñer o SHA1 obtido do voso almacén de claves (obtención da SHA1).
- Unha vez temos a API KEY debemos de modificar o arquivo google_maps_api.xml:
Permisos necesarios e uso da nova API KEY
Para poder utilizar GoogleMap debemos modificar o arquivo AndroidManifiest.xml coas seguintes entradas:
- Debemos engadir os seguintes permisos:
1 <uses-permission android:name="android.permission.INTERNET" /> 2 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 3 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
- Os seguintes permisos non son obrigatorios pero se recomendan utilizalos:
1 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 2 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
- O primeiro serve para permitir que se utilice o WIFI ou antenas móbiles para determinar a localización.
- O segundo serve para permitir que se utilice o GPS para determinar a localización.
- É necesario que a tarxeta gráfica soporte OPEN GL 2.0 para a renderización do mapa.
1 <uses-feature 2 android:glEsVersion="0x00020000" 3 android:required="true"/>
Renderizado do MAPA
Debemos crear un layout para a activity no que se visualizará o mapa.
Aquí temos varias opcións:
- Podemos facer que o mapa ocupe todo o layout:
1 <?xml version="1.0" encoding="utf-8"?> 2 <fragment xmlns:android="http://schemas.android.com/apk/res/android" 3 android:id="@+id/map" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:name="com.google.android.gms.maps.MapFragment"/>
- Podemos facer que o mapa forme parte dun layout:
1 <?xml version="1.0" encoding="utf-8"?> 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 3 xmlns:tools="http://schemas.android.com/tools" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 > 7 8 <fragment 9 android:id="@+id/map" 10 android:layout_width="match_parent" 11 android:layout_height="match_parent" 12 android:name="com.google.android.gms.maps.MapFragment"/> 13 14 </RelativeLayout>
- Unha vez definido o layout creamos a activity que o carga:
1 import android.app.Activity; 2 import android.os.Bundle; 3 4 public class UD10_02_Mapa extends Activity { 5 6 @Override 7 protected void onCreate(Bundle savedInstanceState) { 8 super.onCreate(savedInstanceState); 9 setContentView(R.layout.layout_anteriormente_definido); 10 } 11 }
Se facemos todos os pasos indicados teremos como resultado algo parecido a isto:
Versións da API
Como podemos comprobar o mapa utiliza unha clase MapFragment para visualizarse.
Esta clase foi introducida a partires da API 12 (Android 3.1). Se necesitamos desenrolar unha aplicación para unha versión anterior teremos que modificar o layout e poñer o seguinte:
1 <?xml version="1.0" encoding="utf-8"?> 2 <fragment xmlns:android="http://schemas.android.com/apk/res/android" 3 android:id="@+id/map" 4 android:layout_width="match_parent" 5 android:layout_height="match_parent" 6 android:name="com.google.android.gms.maps.SupportMapFragment"/> 7 />
- Neste caso a activity debe ser unha subclase da clase FragmentActivity que se atopa na librería de compatibilidade v4:
1 import android.os.Bundle; 2 import android.support.v4.app.FragmentActivity; 3 4 public class UD10_02_Mapa extends FragmentActivity { 5 6 @Override 7 protected void onCreate(Bundle savedInstanceState) { 8 super.onCreate(savedInstanceState); 9 setContentView(R.layout.activity_ud10_02_mapa); 10 } 11 }
Manexo do Mapa
Unha vez temos o mapa no layout podemos facer referencia a el dende a activity e modificar propiedades, facer zoom, mover a cámara...
Faremos uso da clase GoogleMap:
- Para referenciar o mapa, debemos facer uso da interface onMapReadyCallback:
1 public class MainActivity extends Activity implements OnMapReadyCallback {
2
3 }
- Ao implementar dita interface xerase automaticamente o seguinte código:
1 import com.google.android.gms.maps.GoogleMap;
2
3 private GoogleMap googleMap;
4
5 @Override
6 public void onMapReady(GoogleMap googleMap) {
7
8 googleMap = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
9
10 }
- Para que chame a este método temos que facer uso do método getMapAsync da clase MapFragment. Nalgún sitio da Activity (normalmente no método onCreate) chamaremos a este método:
1 ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMapAsync(this);
- Se necesitamos que o GoogleMap funcione en versións anteriores á API 12 (Android 3.1) teremos que refencialo desta forma, facendo uso da librería de compatibilidade v4:
1 ((SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map)).getMapAsync(this);
Entre os métodos que podemos empregar:
- setMapType(TIPO_MAPA): Cambio o tipo de mapa, sendo TIPO_MAPA:
- GoogleMap.MAP_TYPE_TERRAIN
- GoogleMap.MAP_TYPE_NORMAL
- GoogleMap.MAP_TYPE_SATELLITE
- GoogleMap.MAP_TYPE_HYBRID
- moveCamera(TIPO_MOVEMENTO): Move a cámara directamente.
- animateCamera(TIPO_MOVEMENTO): Move a cámara cunha animación.
- sendo TIPO_MOVEMENTO:
- CameraUpdateFactory.zoomIn(): Aumenta en 1 o zoom.
- CameraUpdateFactory.zoomOut(): Diminúe en 1 o zoom.
- CameraUpdateFactory.zoomTo(nivel_de_zoom): Nivel de zoom entre 2 e 21.
- sendo TIPO_MOVEMENTO:
- CameraUpdateFactory.newLatLng(lat, long): Nova lonxitude e latitude.
- CameraUpdateFactory.newLatLngZoom(lat, long, zoom): Nova lonxitude e latitude cun zoom determinado.
- CameraUpdateFactory.scrollBy(scrollHorizontal, scrollVertical): Fai un movemento en scroll desprezando o mapa o número de pixeles indicados.
- Nota: Para mover a cámara ou cambiar o zoom faremos uso da clase CameraUpdateFactory e os seus métodos de clase.
- Exemplo de código:
1 LatLng pos = new LatLng(latitude, lonxitude); 2 googleMap.moveCamera(CameraUpdateFactory.newLatLngZoom(pos,15));
Importante: Fixarse como para manexar lonxitudes-latitudes temos que facer uso da clase LatLng.
- getCameraPosition(): Devolve un obxecto da clase CameraPosition a posición da cámara. Dentro desta clase podemos chamar á propiedade target que nos devolve un obxecto da clase LatLng que representa a lonxitude e latitude da posición da cámara.
- Exemplo de código:
1 CameraPosition posCam = googleMap.getCameraPosition(); 2 LatLng posicion = posCam.target;
- Tamén podemos obter o zoom, orientación e ángulo accedendo ás propiedades zoom, bearing e tilt.
Marcas no Mapa
Outra das aplicacións que pode ter o uso de GoogleMap é indicar mediante iconas, posicións concretas do mapa no que alberguemos certa información.
Isto o conseguimos coas clases Marker e MarkerOptions.
- MarkerOptions: Crea unha marca nova no mapa.
A forma de agregala sería:
1 googleMap.addMarker(new MarkerOptions() 2 .position(googleMap.getCameraPosition().target) 3 .title("TI") 4 .snippet("Ti nesta posición:"+ googleMap.getCameraPosition().target.toString()) 5 .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher)));
- Onde:
- position: Posición da marca.
- title: Texto que aparece na marca.
- icon: Icona asociada á marca.
- sniper: Texto que aparece cando pulsamos sobre a marca no mapa.
A chamada ó método addMarker nos devolve o obxecto da clase Marker:
- Marker: Representa a marca no mapa.
1 Marker marca; 2 marca = googleMap.addMarker(new MarkerOptions() 3 .position(googleMap.getCameraPosition().target) 4 .title("TI") 5 .snippet("Ti nesta posición:"+ googleMap.getCameraPosition().target.toString()) 6 .icon(BitmapDescriptorFactory.fromResource(R.drawable.ic_launcher)));
- A través deste obxecto podemos obter:
- getPosition(): A posición (obxecto da clase LatLng).
- getRotation(): A súa rotación.
- getTitle(): O seu título.
- .....
- remove(): eliminamos a marca do mapa.
- setVisible(boolean): Indicamos se queremos que sexa visible a marca no mapa.
Liñas no Mapa
Algunhas veces pode sernos de utilizade 'unir' diferentes marcas no mapa (para indicar unha ruta por exemplo).
Para facelo podemos empregar a clase PolygonOptions.
Nota: Este tipo de liña crea unha figura 'pechada' entre os puntos que a conforman. Se queremos marcar rutas podemos empregar a clase Polyline. Máis información neste enlace.
Esta clase dispón do método add no que se lle pasa a posición a engadir (en forma de obxecto da clase LatLng).
Cando se engade un obxecto desta clase ó mapa, este une os puntos.
Por exemplo:
1 PolygonOptions polOpt = new PolygonOptions();
2 polOpt.add(new LatLng(10,10));
3 polOpt.add(new LatLng(11,11));
4 polOpt.add(new LatLng(12,12));
5 polOpt.strokeColor(Color.BLUE);
6
7 googleMap.clear();
8 googleMap.addPolygon(polOpt);
- Liña 5: Establece unha cor para a liña que vai unir os diferentes puntos.
- Liña 7: Limpa o mapa de marcas e liñas previamente debuxadas.
- Liña 8: Engade ó mapa o conxunto de liñas.
Caso Práctico
O obxectivo desta práctica é crear unha pantalla cun mapa de google.
Poderemos cambiar de tipo de mapa (Satélite / Terrestre), movernos ó centro do mapa e gardar a posición e ir uníndoas cun polígono.
O aspecto desta práctica é o seguinte:
- Como funciona a práctica:
- A nosa icona sempre se visualizará no centro do mapa. Esta será a posición que poderemos gardar como 'puntos de paso' e que despois se unirán formando unha ruta.
- Na parte superior temos:
- Botón Satélite: Cambia o aspecto a modo satélite.
- Botón Terrestre: Cambia o aspecto a modo terrestre.
- Botón Marcar: Garda nun array a posición da icona. Unha vez temos gardados máis de dous, crea un polígono unindo os puntos.
- Botón Mover: Move a icona ó centro do mapa. Para mover o mapa temos que premer sobre o mapa e sen soltar, arrastrar.
- Ó premer sobre a icona informa da posición e amosa un texto.
IMPORTANTE: Aspectos a ter en conta para que funcione este práctica
- Se estamos a utilizar un AVD temos que utilizar un que teña como imaxe unha 'Google API' como indicamos neste punto: Aclaración sobre o dispositivo virtual android (AVD)
- Necesitaremos xerar unha API KEY para o voso eclipse e proxecto como vimos neste punto: Obtención da API KEY.
- Unha vez obtida debemos de escribila no sitio correspondente do arquivo google_maps_api.xml en /res/values
Creamos a activity
- Nome do proxecto: UD10_02_Mapa
- Nome da activity: UD10_02_Mapa.java
Código do layout xml
1 <?xml version="1.0" encoding="utf-8"?>
2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3 xmlns:tools="http://schemas.android.com/tools"
4 android:layout_width="match_parent"
5 android:layout_height="match_parent"
6
7 >
8
9 <fragment
10 android:id="@+id/map"
11 android:layout_width="match_parent"
12 android:layout_height="match_parent"
13 android:name="com.google.android.gms.maps.MapFragment"/>
14
15 <Button
16 android:id="@+id/UD10_02_btnSatelite"
17 android:layout_width="wrap_content"
18 android:layout_height="wrap_content"
19 android:layout_alignParentLeft="true"
20 android:layout_alignParentTop="true"
21 android:text="Satelite" />
22
23 <Button
24 android:id="@+id/UD10_02_btnTerrestre"
25 android:layout_width="wrap_content"
26 android:layout_height="wrap_content"
27 android:layout_alignParentTop="true"
28 android:layout_toRightOf="@+id/UD10_02_btnSatelite"
29 android:text="Terrestre" />
30
31 <Button
32 android:id="@+id/UD10_02_btnMarcar"
33 android:layout_width="wrap_content"
34 android:layout_height="wrap_content"
35 android:layout_alignParentTop="true"
36 android:layout_toRightOf="@+id/UD10_02_btnTerrestre"
37 android:text="Marcar" />
38
39 <Button
40 android:id="@+id/UD10_02_btnMover"
41 android:layout_width="wrap_content"
42 android:layout_height="wrap_content"
43 android:layout_alignParentTop="true"
44 android:layout_toRightOf="@+id/UD10_02_btnMarcar"
45 android:text="Mover" />
46
47 </RelativeLayout>
Código da clase UD10_02_Mapa
Obxectivo: Traballar cun mapa de Google Map utilizando marcas.
1 import java.util.ArrayList;
2
3 import android.app.Activity;
4 import android.graphics.Color;
5 import android.os.Bundle;
6 import android.view.View;
7 import android.view.View.OnClickListener;
8 import android.widget.Button;
9 import android.widget.Toast;
10
11 import com.google.android.gms.maps.CameraUpdateFactory;
12 import com.google.android.gms.maps.GoogleMap;
13 import com.google.android.gms.maps.MapFragment;
14 import com.google.android.gms.maps.model.BitmapDescriptorFactory;
15 import com.google.android.gms.maps.model.LatLng;
16 import com.google.android.gms.maps.model.Marker;
17 import com.google.android.gms.maps.model.MarkerOptions;
18 import com.google.android.gms.maps.model.PolygonOptions;
19
20
21 public class UD10_02_Mapa extends Activity implements OnMapReadyCallback {
22 private GoogleMap googleMapa;
23 private Marker marcaActual;
24 private ArrayList<LatLng>marcas;
25
26 private void xestionarEventos(){
27
28 Button btnSatelite = (Button)findViewById(R.id.UD10_02_btnSatelite);
29 btnSatelite.setOnClickListener(new OnClickListener() {
30
31 @Override
32 public void onClick(View arg0) {
33 // TODO Auto-generated method stub
34
35 googleMapa.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
36
37 }
38 });
39 Button btnTerrestre = (Button)findViewById(R.id.UD10_02_btnTerrestre);
40 btnTerrestre.setOnClickListener(new OnClickListener() {
41
42 @Override
43 public void onClick(View arg0) {
44 // TODO Auto-generated method stub
45
46 googleMapa.setMapType(GoogleMap.MAP_TYPE_TERRAIN);
47
48 }
49 });
50
51 Button btnMover = (Button) findViewById(R.id.UD10_02_btnMover);
52 btnMover.setOnClickListener(new OnClickListener() {
53
54 @Override
55 public void onClick(View arg0) {
56 // TODO Auto-generated method stub
57
58 if (marcaActual != null)
59 marcaActual.remove();
60
61 marcaActual = googleMapa.addMarker(new MarkerOptions()
62 .position(googleMapa.getCameraPosition().target)
63 .title("TI")
64 .snippet(
65 "Ti nesta posición:"
66 + googleMapa.getCameraPosition().target
67 .toString())
68 .icon(BitmapDescriptorFactory
69 .fromResource(R.drawable.common_ic_googleplayservices)));
70
71 }
72 });
73
74 Button btnMarcar = (Button)findViewById(R.id.UD10_02_btnMarcar);
75 btnMarcar.setOnClickListener(new OnClickListener() {
76
77 @Override
78 public void onClick(View arg0) {
79 // TODO Auto-generated method stub
80
81 marcas.add(googleMapa.getCameraPosition().target);
82
83 PolygonOptions polOpt = new PolygonOptions();
84 for (LatLng lugar : marcas){
85 polOpt.add(lugar);
86 }
87 polOpt.strokeColor(Color.BLUE);
88
89 googleMapa.clear();
90 googleMapa.addPolygon(polOpt);
91
92 marcaActual = googleMapa.addMarker(new MarkerOptions()
93 .position(googleMapa.getCameraPosition().target)
94 .title("TI")
95 .snippet(
96 "Ti nesta posición:"
97 + googleMapa.getCameraPosition().target
98 .toString())
99 .icon(BitmapDescriptorFactory
100 .fromResource(R.drawable.common_ic_googleplayservices)));
101
102 }
103 });
104
105 }
106
107 @Override
108 public void onMapReady(GoogleMap googleMap) {
109 this.googleMapa = googleMap;
110
111 LatLng pos = new LatLng(42.879985, -8.544855); // Posición de Santiago de Compostela
112
113 marcaActual = googleMapa.addMarker(new MarkerOptions()
114 .position(pos)
115 .title("TI")
116 .snippet("Ti nesta posición:" + pos.toString())
117 .icon(BitmapDescriptorFactory.fromResource(R.drawable.common_ic_googleplayservices))
118 );
119
120 googleMapa.moveCamera(CameraUpdateFactory.newLatLngZoom(marcaActual.getPosition(),16));
121
122 xestionarEventos();
123
124 }
125
126 @Override
127 protected void onCreate(Bundle savedInstanceState) {
128 super.onCreate(savedInstanceState);
129 setContentView(R.layout.activity_ud10_02__mapa);
130
131 marcas = new ArrayList<LatLng>();
132 ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMapAsync(this);
133
134
135 }
136
137 }
- Liña 22: Definimos o mapa de google.
- Liña 23: A marca que representa a nosa posición. É necesaria xa que se queremos movela temos que primeiro eliminala e despois volvela a crear.
- Liña 24: Definimos o array que vai representar o conxunta de puntos que temos gardados.
- Liña 35: Cambiamos o modo a Satélite ó premer o botón.
- Liña 46: Cambiamos o modo a Terrestre ó premer o botón.
- Liñas 58-69: Xestionamos o evento Click sobre o botón mover.
- Liñas 58-59: Eliminamos a icona do mapa.
- Liñas 61-69: Agregamos unha nova icona (marca) na posición actual da cámara.
- Liñas 81-100: Xestionamos o evento Click sobre o botón marcar.
- Liña 81: Agregamos a posición actual da cámara ó array de marcas.
- Liñas 83-86: Creamos un PolygonOptions e agregamos todas as marcas gardadas no array.
- Liña 87: Establecemos de cor azul a liña que une os puntos.
- Liña 89: Limpa o mapa.
- Liña 90: Agrega o PolygonOptions para debuxar as liñas entre os puntos.
- Liñas 92-100: Agregamos unha nova icona (marca) na posición actual da cámara.
- Liñas 107-123: Obtén unha referencia ó mapa e crea unha marca (icona) en Santiago de Compostela. Chamado automaticamente cando facemos uso do método getMapAsync da clase MapFragment.
- Liña 108: Obtén unha referencia ó mapa.
- Liñas 112-117: Crea unha marca (icona) en Santiago de Compostela.
- Liña 119: Move a cámara do mapa á posición da marca cun zoom de 15.
- Liña 121: Engadimos a xestión de eventos aos botóns.
- Liña 130: Indicamos que cando o mapa estea preparado chame automaticamente ao método onMapReady da interface.
-- Ángel D. Fernández González e Carlos Carrión Álvarez -- (Actualizado 2016).
