1

Tengo un código que está funcionando bien pero se está alargando en una parte porque repito muchas veces algunas funciones y llamados a éstas, como estoy aprendiendo y soy algo novato aún necesito ayuda para mejorar o acortar el código pero que siga funcionando bien.

Procedo a mostrar la parte del código repetitiva:

Bueno la pagina consiste básicamente en un mapa, el cual tiene marcadores, los cuales cambian de color cuando se cambian las id desde el webservice(del que consumi los datos con php). tengo las siguientes funciones que me permiten poner los marcadores cambiando el icono a otro de otro color:

 function ActualMarker1(){
        rIcon = L.icon({
  iconUrl: "marcadores/marker-icon-violet.png",
  }) 
    for ( var i=0; i < markers.length; ++i ){
        L.marker( [markers[0].lat, markers[0].lng], {icon: rIcon} )
        .bindPopup( 'Evasión Control' ).addTo( cities );
    }
   }

  function ActualMarker2(){
    rIcon = L.icon({
iconUrl: "marcadores/marker-icon-green.png",
}) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[0].lat, markers[0].lng], {icon: rIcon} )
        .bindPopup( 'Emisiones Diesel' ).addTo( cities );
    }
   }

   function ActualMarker3(){
     rIcon = L.icon({
 iconUrl: "marcadores/marker-icon-yellow.png",
 }) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[0].lat, markers[0].lng], {icon: rIcon} )
        .bindPopup( 'Control Taximetros' ).addTo( cities );
    }
     }

     function ActualMarker4(){
        rIcon = L.icon({
  iconUrl: "marcadores/marker-icon-violet.png",
  }) 
    for ( var i=0; i < markers.length; ++i ){
        L.marker( [markers[1].lat, markers[1].lng], {icon: rIcon} )
        .bindPopup( 'Evasión Control' ).addTo( cities );
    }
   }

  function ActualMarker5(){
    rIcon = L.icon({
iconUrl: "marcadores/marker-icon-green.png",
}) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[1].lat, markers[1].lng], {icon: rIcon} )
        .bindPopup( 'Emisiones Diesel' ).addTo( cities );
    }
   }

   function ActualMarker6(){
     rIcon = L.icon({
 iconUrl: "marcadores/marker-icon-yellow.png",
 }) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[1].lat, markers[1].lng], {icon: rIcon} )
        .bindPopup( 'Control Taximetros' ).addTo( cities );
    }
     }

     function ActualMarker7(){
        rIcon = L.icon({
  iconUrl: "marcadores/marker-icon-violet.png",
  }) 
    for ( var i=0; i < markers.length; ++i ){
        L.marker( [markers[2].lat, markers[2].lng], {icon: rIcon} )
        .bindPopup( 'Evasión Control' ).addTo( cities );
    }
   }

  function ActualMarker8(){
    rIcon = L.icon({
iconUrl: "marcadores/marker-icon-green.png",
}) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[2].lat, markers[2].lng], {icon: rIcon} )
        .bindPopup( 'Emisiones Diesel' ).addTo( cities );
    }
   }

   function ActualMarker9(){
     rIcon = L.icon({
 iconUrl: "marcadores/marker-icon-yellow.png",
 }) 
    for ( var  i=0; i < markers.length; ++i ){
        L.marker( [markers[2].lat, markers[2].lng], {icon: rIcon} )
        .bindPopup( 'Control Taximetros' ).addTo( cities );
    }
     }

Y con el siguiente código en php, llamo las funciones, que permite que luego al variar las id (que la id en este caso se llama ot) en el webservice y al recargar la página, los iconos cambian de color.

<?php
for($i=0; $i<count($f_result); $i++){

if($f_result[0]->ot == 95)
{
    echo "<script>";
    echo "ActualMarker1();";
    echo "</script>";
}elseif($f_result[0]->ot == 98)
{
    echo "<script>";
    echo "ActualMarker2();";
    echo "</script>";
}elseif($f_result[0]->ot == 102)
{
    echo "<script>";
    echo "ActualMarker3();";
    echo "</script>";
}   
     if($f_result[1]->ot == 95)

    {
        echo "<script>";
        echo "ActualMarker4();";
        echo "</script>";
    }elseif($f_result[1]->ot == 98)
    {
        echo "<script>";
        echo "ActualMarker5();";
        echo "</script>";
    }elseif($f_result[1]->ot == 102)
    {
        echo "<script>";
        echo "ActualMarker6();";
        echo "</script>";
    }
      if($f_result[2]->ot == 95)
  {
      echo "<script>";
      echo "ActualMarker7();";
      echo "</script>";
  }elseif($f_result[2]->ot == 98)
  {
    echo "<script>";
      echo "ActualMarker8();";
      echo "</script>";
  }elseif($f_result[2]->ot == 102)
  {
      echo "<script>";
      echo "ActualMarker9();";
      echo "</script>";
}else{
  echo "esto no esta funcionando bien";
}

}

?>

Y como dije anteriormente lo que necesito es que no sea tan repetitivo, algo así como pulir el código, espero puedan ayudarme, de antemano muchas gracias.

1 respuesta 1

1

Nota: voy a poner una sugerencia para simplificar/limpiar el código. No voy a entrar a analizar si el código es correcto o si contiene errores.

La parte de JavaScript son 9 funciones similares en las que sólo cambian tres valores: (1) la URL del icono; (2) el índice de los marcadores; y (3) el texto a mostrar en el pop-up.

Inicialmente iba a sugerir poner esos datos en un array y pasar una variable para saber qué dato leer en el array (lo cual puede ser conveniente especialmente si la lista va a cambiar). Algo como esto:

const valores = [
    { 
      iconUrl: "marcadores/marker-icon-violet.png",
      markerIndex: 0,
      texto: 'Evasión Control'
    },
    { 
      iconUrl: "marcadores/marker-icon-green.png",
      markerIndex: 0,
      texto: 'Emisiones Diesel'
    },
    ...

Pero luego me di cuenta de que los valores se repiten 3 veces:

  • violeta, verde, amarillo, violeta, verde, amarillo, violeta, verde, amarillo
  • 0, 0, 0, 1, 1, 1, 2, 2, 2
  • Evasión Control, Emisiones Diesel, Control Taximetros, ...x3

Entonces puedes usar un simple switch para ver qué valor corresponde en cada caso. Lo cual no se va a poder extender tan fácilmente, pero va a simplificar el código considerablemente:

function ActualMarker(indice) {
  const iconUrls = [ "marcadores/marker-icon-violet.png", "marcadores/marker-icon-green.png", "marcadores/marker-icon-yellow.png" ];
  const textos = ['Evasión Control', 'Emisiones Diesel', 'Control Taximetros'];

  const iconUrl = iconUrls[ (indice-1) % 3 ];
  const texto = textos[ (indice-1) % 3 ];
  const markerIndex = Math.floor( indice / 3 );

  rIcon = L.icon({ iconUrl: iconUrl })
  for (var i = 0; i < markers.length; ++i) {
    L.marker([markers[ markerIndex ].lat, markers[ markerIndex ].lng], {
        icon: rIcon
      })
      .bindPopup( texto ).addTo(cities);
  }
}

Ahora, en lugar de llamar a la función ActualMarker1, llamarías a ActualMarker con el parámetro 1; para ActualMarker2, llamarías a ActualMarker(2); etc.


Para el PHP podrías hacer algo parecido (tienes tres secciones similares en las que sólo difiere el valor del índice del resultado, el valor de ot y los scripts que se escriben). Pero el código no es igual, además de que el último caso incluye algo adicional.

Para simplificarlo, quíta tanto if...elseif...else anidado y usa un switch. Además, puedes poner todos los echo de cada caso juntos porque el resultado es similar a tenerlos separados:

// no usas $i en ningún lugar del bucle, ¿seguro que es correcto?
for($i=0; $i<count($f_result); $i++){

  switch ($f_result[0]) {
    case  95: echo '<script>ActualMarker(1)</script>'; break;
    case  98: echo '<script>ActualMarker(2)</script>'; break;
    case 102: echo '<script>ActualMarker(3)</script>'; break;
  }
  switch ($f_result[1]) {
    case  95: echo '<script>ActualMarker(4)</script>'; break;
    case  98: echo '<script>ActualMarker(5)</script>'; break;
    case 102: echo '<script>ActualMarker(6)</script>'; break;
  }
  switch ($f_result[2]) {
    case  95: echo '<script>ActualMarker(7)</script>'; break;
    case  98: echo '<script>ActualMarker(8)</script>'; break;
    case 102: echo '<script>ActualMarker(9)</script>'; break;
    default:  echo "esto no esta funcionando bien"; break; 
  }
}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.