Stack Overflow en español Asked by Juan Javier Escobar Rubio on December 8, 2020
estoy haciendo una calculadora solar de placas solares que me han pedido.
De momento tengo esto:(Si lo se, no tiene estilo y se puede colocar mejor. Acepto consejos pero no os metáis mucho conmigo que aun lo estoy haciendo jajajaja)
<!doctype HTML>
<html>
<head>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.css" />
<link rel="stylesheet" href="https://unpkg.com/leaflet-geosearch/dist/geosearch.css" />
<style>
#map{
width: 100%;
height: 580px;
box-shadow: 5px 5px 5px #888;
}
#rango{
width: 30%;
background: #4CC561;
cursor: pointer;
}
</style>
<script>
function calcular(){
var consumo = document.getElementById("consumo");
var orientacion = document.getElementsByName("orientacion");
var inclinacion = document.getElementById("rango");
var resultado = "";
var precioConsumo = 0;
var precioOrientacion = 0;
var precioInclinacion = 0;
for(var i=0;i<orientacion.length;i++){
if(orientacion[i].checked){
resultado = orientacion[i].value;
}
}
if(consumo.value >= 1 && consumo.value <= 99){
precioConsumo = 100;
}else if(consumo.value >= 100 && consumo.value <= 199){
precioConsumo = 200;
}else if(consumo.value >= 200 && consumo.value <= 299){
precioConsumo = 300;
}else if(consumo.value >= 300 && consumo.value <= 399){
precioConsumo = 400;
}else if(consumo.value >= 400 && consumo.value <= 499){
precioConsumo = 500;
}else{
precioConsumo = 600;
}
if(resultado == "oeste"){
precioOrientacion = 100;
}else if(resultado == "suroeste"){
precioOrientacion = 200;
}else if(resultado == "sur"){
precioOrientacion = 300;
}else if(resultado == "sureste"){
precioOrientacion = 400;
}else if(resultado == "este"){
precioOrientacion = 500;
}
if(inclinacion.value >= 0 && inclinacion.value <= 9){
precioInclinacion = 100;
}else if(inclinacion.value >= 10 && inclinacion.value <= 19){
precioInclinacion = 200;
}else if(inclinacion.value >= 20 && inclinacion.value <= 29){
precioInclinacion = 300;
}else if(inclinacion.value >= 30 && inclinacion.value <= 39){
precioInclinacion = 400;
}else if(inclinacion.value >= 40 && inclinacion.value <= 49){
precioInclinacion = 500;
}else if(inclinacion.value >= 50 && inclinacion.value <= 59){
precioInclinacion = 600;
}else{
precioInclinacion = 650;
}
document.getElementById('precio').value = precioConsumo + precioOrientacion + precioInclinacion + "€";
}
</script>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<div id="map">
</div>
<label for="latitud">Latitud:</label>
<input type="text" name="latitud" id="latitud">
<label for="longitud">Longitud:</label>
<input type="text" name="longitud" id="longitud">
<label for="consumo">Consumo:</label>
<input type="text" name="consumo" id="consumo">
<label for="orientacion">Orientacion:</label>
<input type="radio" name="orientacion" value="oeste"/> Oeste
<input type="radio" name="orientacion" value="suroeste"/> Suroeste
<input type="radio" name="orientacion" value="sur"> Sur
<input type="radio" name="orientacion" value="sureste"> Sureste
<input type="radio" name="orientacion" value="este"> Este
<label for="slider">Inclinacion:</label>
<p><input type="range" min="0" max="60" step="1" value="30" id="rango"><label>30</label></p>
<button onClick="calcular()">Calcular</button>
<label>Precio Estimado:
<input type="text" id="precio">
</label>
<script>
var input = document.querySelector("input[type=range]");
actualizarInput(input)
input.addEventListener("input", function(evt) {
actualizarInput(input)
});
function actualizarInput(input){
var label = input.parentElement.querySelector("label");
label.innerHTML = input.value;
var inputMin = input.getAttribute("min");
var inputMax = input.getAttribute("max");
var unidad = (inputMax - inputMin) / 100;
input.style.setProperty("--value", (input.value - inputMin)/unidad);
}
</script>
</body>
<script src="https://cdn.jsdelivr.net/npm/leaflet.locatecontrol/dist/L.Control.Locate.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/leaflet-geosearch/dist/geosearch.umd.js"></script>
<script>
var map = L.map('map',{drawControl: true}).
setView([40.4179, -3.7106],
6);
googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{
maxZoom: 20,
subdomains:['mt0','mt1','mt2','mt3']
}).addTo(map);
L.control.scale().addTo(map);
L.control.locate().addTo(map);
const search = new GeoSearch.GeoSearchControl({
provider: new GeoSearch.OpenStreetMapProvider(),
});
map.addControl(search);
map.on('click', function(e) {
document.getElementById("latitud").value = e.latlng.lat
document.getElementById("longitud").value = e.latlng.lng
});
</script>
</html>
Como podéis ver es un mapa de la librería Leaflet de JavaScript a la que le he ido añadiendo cosas según me pedían.
Ahora la persona para la que se lo estoy haciendo me ha pedido esto.
Esta es la libreria de la foto: https://ec.europa.eu/jrc/en/PVGIS/releases/pvgis51
y esto lo que pide que haga la calculadora.
Asique es donde recurro a vosotros para conseguir eso que me pide.
Get help from others!
Recent Answers
Recent Questions
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP