0

tengo un inconveniente con un mapa que se carga al seleccionar un elemento de un combobox. En primera seleccion funciona bien pero al seleccionar otra linea me tira el error Cannot set property 'innerHTML' of null. Intenté usar el window.onload = pero siempre me tira el error.

La parte de html es ésta

  </head>

<body>
<div id="popup" class="ol-popup">
 <a href="#" id="popup-closer" class="ol-popup-closer"></a>
  <div id="popup-content"></div>
</div>

 <div  data-role="main" id="headerlineas" 
style="height:100%;width:100%; position:absolute; margin:0;padding:0; 
 background:#F2EFE9; " >

    <div data-role="header" id="titulo" data-theme="a"; >
        <h3>Consulta de Lineas</h3>     
    </div>

    <div id="cabezal">
    <select name="sel_linea" id="linea" data-native-menu="false" 
    onchange="javascript:lineaselect();" >
    <?php echo lineaOptions( 0,$_GET[a]);?> 
    </select>
    <textarea id="infolineas" readonly  name="sel_infolineas" 
    style="overflow:auto;border:solid 1px black; max-height:50px; min- 
   height:50px;max-width:100%; max-width:100%; width:100%; 
   height:50px;resize:none; ">
    </textarea> 
  </div>
 <div align="center" id="map" class="map" 
 style="height:68%;width:100%; background:#DADADA;"></div>

 <script type="text/javascript">




  function lineaselect() {



element = document.getElementById('linea');
var id =  element.value;
 //  var id =  element.options[element.selectedIndex].value;
var cliente = <?php echo $_GET[a];?>;

$.post("select_urbano.php", {id:id,cli:cliente}, function(data) {

   $('#infolineas').html(data);  

 });    

$.post("select_puntalinea.php", {id:id,cli:cliente}, function( data ) 
{

      $('#map').html(data); 


    }); 

 }

  /* function puntalineaselect() {
   elementlinea = document.getElementById('linea');
    elementpuntalinea = document.getElementById('puntalineas');
    var idlinea = elementlinea.value;
    var idpuntalinea = elementpuntalinea.value;
    var cliente = <?php echo $_GET[a];?>;

   $.post("select_puntalinea.php", 
   {idlinea:idlinea,idpuntalinea:idpuntalinea, cli:cliente }, 
  function( data ) {
      $('#map').html(data); 

    }); 
  }*/

 </script>

  </div> 
 </body>

y esta la de java script (la parte donde llama a los div y se ejecuta la parte que falla.

 	var vueltas = 1; 
	 	for (var i=0;i<coord_arr.length;i++){
	 		var data=coord_arr[i].split('|');
	 		var longi_parada= parseFloat(data[0]); //toma la longitud de la parada **** viene en este formato '-33.1333' *****
	 		var lati_parada= parseFloat(data[1]); //toma la latitud  
	 		var id_parada = (data[2]);


    	var iconoParada = new ol.Feature({
	 						'geometry': new ol.geom.Point(ol.proj.transform( 
	 							[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857')),
	 						'id': ol.proj.transform( 
		 							[longi_parada,lati_parada], 'EPSG:4326', 'EPSG:3857'),
	 						'name': id_parada		 
	 					});
		  source.addFeature(iconoParada);
		  
	
	 		} 


		//******** ventana popup para paradas **********//
	  	 var container = document.getElementById('popup');
	     var content = document.getElementById('popup-content');
	     var closer = document.getElementById('popup-closer');

	 	var popup = new ol.Overlay({
	  	   element: container,		  
	       positioning: 'bottom-center',
	       content: id_parada,
	       stopEvent: true,
	       autoPan: true,
	       offset: [0, -50],
	         autoPanAnimation:{
	           duration: 20
	         }
	      
	     });
	 	window.onload = map.addOverlay(popup);
	 	
	 map.on('click', function(evt) {
				    	
				        var feature =  map.forEachFeatureAtPixel(evt.pixel, 		
				        function(feature) {
				            return feature;
				          });
				        if (feature) {
				      	alert (feature.get('name'));
				         var coordinates = feature.getGeometry().getCoordinates(); 			     
				         content.innerHTML = '<p>Parada:</p><code>' +feature.get('name') +'</code>';
				         popup.setPosition(coordinates);

				        }
				      });
				closer.onclick = function() {
							   popup.setPosition(undefined);
							   closer.blur();
					    	   return false;
					    	  };
				    	
	

// 		 closer.onclick = function() {
// 		   popup.setPosition(undefined);
// 		   closer.blur();
//     	   return false;
//     	  };
		   


// 	      // change mouse cursor when over marker
// 	      map.on('pointermove', function(d) {
// 	        if (d.dragging) {
// 	          $(element).popover('destroy');
// 	          return;
// 	        }
// 	        var pixel = map.getEventPixel(d.originalEvent);
// 	        var hit = map.hasFeatureAtPixel(pixel);
// 	        //popup.getTarget().style.cursor = hit ? 'pointer' : '';
// 	      });

	 }

3
  • 2
    te recomiendo leer window.onload
    – Bryro
    Commented el 27 feb. 2019 a las 18:28
  • si amigo, lo lei, de hecho es muy claro el concepto pero no logro adaptarlo a mi necesidad :/
    – Sama
    Commented el 27 feb. 2019 a las 18:53
  • y que has intentado para adaptarlo???
    – user46896
    Commented el 3 ago. 2022 a las 20:32

1 respuesta 1

0

Intenta utilizar el window.onload que te esperar hasta el documento se cargue. En el script que incorporas pon esto

window.onload = function(){
  //Aqui todo el codigo que tienes
}

Si no, intenta incorporar el código siempre al final de HTML para que sea lo ultimo que se lea.

Espero que te sirva.

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.