|
B4A en español - Juan Antonio Villalpando
(BASIC4Android)
-- Tutorial de B4A --
Volver al índice del tutorial
____________________________
52B.- Mapa de Google y archivos. Street View.
- Esta página es una continuación de la anterior referente a los mapas de Google. Vamos a ver otras posibilidades.
- En este caso construiremos un "Layout" con: EditText1, EditText2, Button1 y Button2, como se encuentra en la imagen derecha.
- Escribimos las coordenadas, pulsamos "Guardar" y "Ver" y obtendremos un Street View.
Es conveniente ver los ejemplos de la API de los mapas de Google,. Concretamente este ejemplo.
Para ello visualizamos su código, especialmente los carácteres que están en rojo en negrita.
Observamos las coordenadas, y abajo las dimensiones de la pantalla. |
 |
Código de Street View de Google. |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Controls</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng(42.345573,-71.098326);
// Note: constructed panorama objects have visible: true
// set by default.
var panoOptions = {
position: fenway,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 350px; height: 480px"></div>
</body>
</html>
|
Este archivo lo voy a dividir en dos partes: parte1.txt y parte2.txt
Fíjate que los he dividido por la parte de las coordenadas que he eliminado: 42.345573,-71.098326
parte1.txt |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Street View Controls</title>
<link href="/maps/documentation/javascript/examples/default.css" rel="stylesheet">
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
function initialize() {
var fenway = new google.maps.LatLng( |
parte2.txt |
);
// Note: constructed panorama objects have visible: true
// set by default.
var panoOptions = {
position: fenway,
addressControlOptions: {
position: google.maps.ControlPosition.BOTTOM
},
linksControl: false,
panControl: false,
zoomControlOptions: {
style: google.maps.ZoomControlStyle.SMALL
},
enableCloseButton: false
};
var panorama = new google.maps.StreetViewPanorama(
document.getElementById('pano'), panoOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="pano" style="width: 350px; height: 480px"></div>
</body>
</html> |
Estos dos archivos los copiaremos en la carpeta Files del proyecto.
Este es el código del programa...
Necesita un Layout con: EditText1, EditText2, Button1 y Button2
Copia y pega este código en un nuevo proyecto |
Sub Process_Globals
' Juan Antonio Villalpando
' juana1991@yahoo.com
' marzo 2013
End Sub
Sub Globals
Dim EditText1, EditText2 As EditText
Dim latitud, longitud, todo As String
Dim WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
WebView1.Initialize("WebView1")
Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
Activity.LoadLayout("Layout")
EditText1.Text = 36.5286
EditText2.Text = -6.189
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause(UserClosed As Boolean)
End Sub
Sub Button1_Click
Dim mFilePath As String
latitud = EditText1.Text
longitud = EditText2.Text
Dim parte1, parte2 As TextReader
parte1.Initialize(File.OpenInput(File.DirAssets, "parte1.txt"))
parte2.Initialize(File.OpenInput(File.DirAssets, "parte2.txt"))
' Toma los dos archivos, la longitud y la latitud y los une.
todo = File.ReadString(File.DirAssets, "parte1.txt") & latitud & "," & longitud & File.ReadString(File.DirAssets, "parte2.txt")
If File.ExternalWritable = True Then
' Hay tarjeta SD Card Instalada
mFilePath = File.DirRootExternal
Else
' No hay tarjeta SD Card
mFilePath = File.DirInternal
End If
' Guarda todo en el archivo todo.htm
Dim tw As TextWriter
tw.Initialize(File.OpenOutput(mFilePath, "todo.htm", False))
tw.Write(todo)
parte1.Close
parte2.Close
tw.Close
End Sub
Sub Button2_Click
Dim mFilePath As String
If File.ExternalWritable = True Then
' Hay tarjeta SD Card Instalada
mFilePath = File.DirRootExternal
Else
' No hay tarjeta SD Card
mFilePath = File.DirInternal
End If
If File.Exists(mFilePath, "todo.htm") = True Then
Dim tr As TextReader
tr.Initialize(File.OpenInput(mFilePath, "todo.htm"))
End If
WebView1.LoadUrl("file://" & mFilePath & "/todo.htm")
tr.Close
End Sub |
________________
- Comentarios.
- Escribimos la latitud y la longitud en los casilleros. Pulsamos el botón "Guardar" para que se guarde esa información en el archivo "todo.htm". Luego pulsamos el botón "Ver" para ver ese archivo como página web.
- Debemos poner coordenadas que se encuentren en el callejero de Street View. Si ponemos coordenadas que no se encuentran en el callejero saldrá la web en blanco. Se puede adaptar facilmente el código para que en vez de actuar con el Street View, actúe con mapas de satélite y carreteras.
- El algoritmo toma los archivos parte1.txt y parte2.txt, además de las coordenadas escrita en los casilleros y los une:
todo = parte1.txt & latitud & , & longitud & parte2.txt
todo = File.ReadString(File.DirAssets, "parte1.txt") & latitud & "," & longitud & File.ReadString(File.DirAssets, "parte2.txt"
- Esto lo guarda en el archivo todo.htm
tw.Initialize(File.OpenOutput(mFilePath, "todo.htm", False))
tw.Write(todo)
- Con el botón "Ver" presentamos el archivo todo.htm como web
WebView1.LoadUrl("file://" & mFilePath & "/todo.htm")
- Los archivos parte1.txt y parte2.txt se encuentran en la carpeta de solo lectura Files del proyecto. (File.DirAssets)
- El programa consulta si exite SDCard: (File.DirRootExternal) o no: (File.DirInternal) y guarda el archivo todo.htm en uno de los dos lugares.
________________________________________________
2.- Otra manera parecida al anterior.
Los archivos parte1txt y parte2.txt lo copias en la carpeta Files.
En este caso en el todo.htm utilizo dos variables para la Latitud y Longitud.
parte1.txt |
<html>
<head>
<style type='text/css'>
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type='text/javascript' src='http://maps.google.com/maps/api/js?sensor=true&libraries=drawing'></script>
<script type='text/javascript'> |
El programa concatenará estos dos archivos y entre ellos escribirá esta línea:
Lati = 36.5; Longi = -6.1;
todo = File.ReadString(File.DirAssets, "parte1.txt") & " Lati = " & latitud & "; Longi = " & longitud & ";" & File.ReadString(File.DirAssets, "parte2.txt")
parte2.txt |
var drawingManager; var myLatlng = new google.maps.LatLng(Lati, Longi);
var map;
function initialize() {map = new google.maps.Map(document.getElementById('map_canvas'), {zoom: 12,center: myLatlng, mapTypeId:
google.maps.MapTypeId.TERRAIN, mapTypeControlOptions: { style: google.maps.MapTypeControlStyle.DROPDOWN_MENU }, disableDefaultUI:
true,zoomControl: true,streetViewControl: true, scrollwheel: true, disableDoubleClickZoom: false, draggable:
true, keyboardShortcuts: true, mapTypeControl: true,navigationControl: true, scaleControl: true, mapTypeControlOptions:
{ style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR, position: google.maps.ControlPosition.TOP_RIGHT },navigationControlOptions:
{ style: google.maps.NavigationControlStyle.DEFAULT }})
google.maps.event.addListener(map, 'click', function (mouseEvent) { var lat=mouseEvent.latLng.lat();
var lng=mouseEvent.latLng.lng(); juanantonio.CallSub('LatitudLongitud', true, lat, lng); });
var marker1 = new google.maps.Marker({ position: new google.maps.LatLng(Lati, Longi), map: map, title: 'A',
clickable: true, draggable: true, icon: 'http://www.google.com/mapfiles/arrow.png' });}
google.maps.event.addDomListenerOnce(window, 'load', initialize);
</script>
</head>
<body onload=initialize()>
<div id='map_canvas' style='width:100%; height:100%'>
</div>
</body>
|
- Este es el código del programa...
Necesitas un Layout con: EditText1, EditText2, Button1 y Button2
Copia y pega este código en un nuevo proyecto |
Sub Process_Globals
' Juan Antonio Villalpando
' juana1991@yahoo.com
' marzo 2013
End Sub
Sub Globals
Dim EditText1, EditText2 As EditText
Dim latitud, longitud, todo As String
Dim WebView1 As WebView
End Sub
Sub Activity_Create(FirstTime As Boolean)
WebView1.Initialize("WebView1")
Activity.AddView(WebView1, 0, 0, 100%x, 100%y)
Activity.LoadLayout("Layout")
EditText1.Text = 36.5286
EditText2.Text = -6.189
End Sub
Sub Activity_Resume
End Sub
Sub Activity_Pause(UserClosed As Boolean)
End Sub
Sub Button1_Click
Dim mFilePath As String
latitud = EditText1.Text
longitud = EditText2.Text
Dim parte1, parte2 As TextReader
parte1.Initialize(File.OpenInput(File.DirAssets, "parte1.txt"))
parte2.Initialize(File.OpenInput(File.DirAssets, "parte2.txt"))
' Toma los dos archivos, la longitud y la latitud y los une.
todo = File.ReadString(File.DirAssets, "parte1.txt") & " Lati = " & latitud & "; Longi = " & longitud & ";" & File.ReadString(File.DirAssets, "parte2.txt")
If File.ExternalWritable = True Then
' Hay tarjeta SD Card Instalada
mFilePath = File.DirRootExternal
Else
' No hay tarjeta SD Card
mFilePath = File.DirInternal
End If
' Guarda todo en el archivo todo.htm
Dim tw As TextWriter
tw.Initialize(File.OpenOutput(mFilePath, "todo.htm", False))
tw.Write(todo)
parte1.Close
parte2.Close
tw.Close
End Sub
Sub Button2_Click
Dim mFilePath As String
If File.ExternalWritable = True Then
' Hay tarjeta SD Card Instalada
mFilePath = File.DirRootExternal
Else
' No hay tarjeta SD Card
mFilePath = File.DirInternal
End If
If File.Exists(mFilePath, "todo.htm") = True Then
Dim tr As TextReader
tr.Initialize(File.OpenInput(mFilePath, "todo.htm"))
End If
WebView1.LoadUrl("file://" & mFilePath & "/todo.htm")
tr.Close
End Sub |
Más sobre mapas de Google
Más sobre API de Google Maps
________________________________
|
