Javascript de GMaps
-------------------
.. code-block:: javascript
var latitud=38.59
var longitud=-3.55
var mi_nivel_de_zoom=8
var obj_mapa
function inicio(){
var div_mapa=document.getElementById("mapa")
var obj_coordenadas=new google.maps.LatLng(latitud,longitud)
var obj_opciones={
center:obj_coordenadas,
zoom:mi_nivel_de_zoom
}
obj_mapa=new google.maps.Map(div_mapa, obj_opciones)
$("#mover").click (mover_el_mapa)
}
function mover_el_mapa() {
var obj_latitud=$("#latitud")
var valor_latitud=obj_latitud.val()
var valor_longitud=$("#longitud").val()
var nuevas_coordenadas=new google.maps.LatLng(
valor_latitud, valor_longitud)
obj_mapa.panTo(nuevas_coordenadas)
}
Ejercicio
---------
Ampliar el programa con una lista de ciudades del mundo. Cuando el usuario elija una de ellas, nuestro programa nos dirá la distancia desde Ciudad Real a dichas ciudades. Considerar las siguientes coordenadas en formato (latitud, longitud):
* Ciudad Real: (38.59, -3.55)
* Nueva York: (40.73, -73.87)
* Sidney: (-33.90, 151.13)
* Berlin: (52.31, 13.39)
* París: (48.85, 2.35)
Para poder conseguir esto, hay que modificar la URL de carga de GoogleMaps para solicitar que se cargue una biblioteca que nos ayudará a resolver este punto. En concreto, ahora pasaremos un parámetro ``libraries`` con el valor ``geometry`` que nos permitirá utilizar la biblioteca en concreto. Ahora el HTML es así:
.. code-block:: html
Ahora una función que nos calcula la distancia sería algo como esto:
.. code-block:: javascript
/* Nos da la distancia en metros entre CR
* y el punto (latitud_destino,longitud_destino)
* (abreviados lat_dest y lng_dest)*/
function distancia(lat_dest, lng_dest)
{
let latitud_cr=38.59
let longitud_cr=-3.55
let coords_origen=new google.maps.LatLng(
latitud_cr, longitud_cr)
let coords_destino=new google.maps.LatLng(
lat_dest, lng_dest)
let distancia=google.maps.geometry.spherical.computeDistanceBetween(
coords_origen, coords_destino
)
return distancia
}
Ejercicio
---------
La empresa Automobile Creation for Millenium Enterprise (ACME) planea lanzar una página web en la que se permita al usuario configurar los coches a su medida, ofreciendo las distintas opciones en pantalla para que el usuario las elija. Sin embargo no todas las combinaciones se permiten en fábrica por lo que deberán tenerse en cuentas las siguientes
Especificaciones
~~~~~~~~~~~~~~~~
* Hay dos motores: gasolina (5000) y diésel (6800)
* Hay dos carrocerías: monovolumen (4500) y berlina (3700)
* Hay tres accesorios: radio-cd con MP3 (180), alerones deportivos (220) y llantas de aleación (200)
Por diversos problemas, no es posible combinar las siguientes opciones:
* No se pueden tener berlinas de gasolina.
* No se puede integrar el alerón en los monovolúmenes.
* No se puede poner el radio-cd a los monovolúmenes.
Cuando se marque cualquiera de estas opciones, hay que limpiar todo el configurados y avisar de que no se puede hacer eso. No se pueden usar ``alerts``
.. code-block:: javascript
let vector_ids=["#gasolina", "#diesel", "#monovolumen",
"#berlina", "#radiocd", "#alerones", "#llantas"]
let precios=[5000, 6800, 4500,
3700, 180, 220, 200]
function inicio(){
for (let pos in vector_ids){
let el_id=vector_ids[pos]
$(el_id).click ( calcularPrecio )
}
}
function cocheEsFabricable() {
//Caso 1: nada de berlinas de gasolina
let marcada_la_berlina=$("#berlina").prop("checked")
let marcada_la_gasolina=$("#gasolina").prop("checked")
if (marcada_la_berlina && marcada_la_gasolina) {
alert ("No se pueden fabricar berlinas de gasolina")
return false
}
let marcado_aleron=$("#alerones").prop("checked")
let marcado_monovolumen=$("#monovolumen").prop("checked")
if (marcado_aleron && marcado_monovolumen ) {
alert ("No podemos integrar los alerones en monovolúmenes")
return false
}
let marcado_radiocd=$("#radiocd").prop("checked")
if (marcado_radiocd && marcado_monovolumen) {
alert ("No podemos fabricar un monovol. con radio-cd")
return false
}
return true
}
/* Calcula el precio del coche en función de lo que esté marcado
* y lo que no.*/
function calcularPrecio() {
let todo_bien=cocheEsFabricable()
if (todo_bien!=true) {
return
}
let precioCoche=0
for (var pos in vector_ids){
let el_id=vector_ids[pos]
if ($(el_id).prop("checked")) {
let precio_accesorio=precios[pos]
precioCoche=precioCoche+precio_accesorio
}
}
alert ("El precio es:"+precioCoche)
}
Ampliación
----------
Se desea que el usuario puede elegir entre los siguientes colores con los siguientes precios:
* Blanco: 700 euros
* Rojo, Verde y Azul básicos: 950
* Gris, Negro y Naranja: 1400 euros por ser colores metalizados
Además, se desea ver una muestra de color en algún punto de la página. Para lograrlo se necesitará utilizar un método que proporciona JQuery y que se llama ``addClass``
Solución HTML
~~~~~~~~~~~~~
.. code-block:: html