2010-05-11 9 views
8

Y eso es decir algo. Esto se basa en el ejemplo de Google Maps para obtener indicaciones en Maps API v3.Comportamiento de JavaScript más loco que he visto

<html> 
<head> 
<meta name="viewport" content="initial-scale=1.0, user-scalable=no"/> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Directions</title> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
var directionDisplay; 
var directionsService = new google.maps.DirectionsService(); 
var map; 


function initialize() { 
    directionsDisplay = new google.maps.DirectionsRenderer(); 

    var myOptions = { 
     zoom:7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 

    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); 
    directionsDisplay.setMap(map); 
    directionsDisplay.setPanel(document.getElementById("directionsPanel")); 
} 

function render() { 
    var start; 

    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
     }, function() { 
      handleNoGeolocation(browserSupportFlag); 
     }); 
     } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(); 
    } 

    alert("booga booga"); 


    var end = '<?= $_REQUEST['destination'] ?>'; 
    var request = { 
     origin:start, 
     destination:end, 
     travelMode: google.maps.DirectionsTravelMode.DRIVING 
    }; 
    directionsService.route(request, function(response, status) { 
     if (status == google.maps.DirectionsStatus.OK) { 
     directionsDisplay.setDirections(response); 
     } 
    }); 
} 

</script> 
</head> 
<body style="margin:0px; padding:0px;" onload="initialize()"> 
<div><div id="map_canvas" style="float:left;width:70%; height:100%"></div> 
<div id="directionsPanel" style="float:right;width:30%;height 100%"></div> 
<script type="text/javascript">render();</script> 
</body> 
</html> 

Ver "alerta ('booga booga')" ¿allí?

Con eso en su lugar, todo esto funciona de maravilla. Comente eso, y var start no está definido cuando tocamos la línea para definir la solicitud var.

Descubrí esto cuando eliminé la alerta que puse allí para mostrarme el valor de var start, y dejó de funcionar. Si YO DOY que me avise el valor de var start, me dice que no está definido, PERO tiene un valor válido (¡y exacto!) Cuando definimos var request unas pocas líneas más tarde.

Sospecho que es un problema de temporización, como algo asincrónico que está teniendo tiempo de completarse en segundo plano en el momento en que me toma despedir la alerta. ¿Alguna idea sobre las soluciones alternativas?

+7

+1 causa bla bla me hicieron lol – user318747

+0

Je. Tengo que decirte, cuando cambié de decirme sobre la variable en cuestión a decirme una cadena aleatoria y TODAVÍA falló sin ella ... Whew. –

Respuesta

16

Lo que está asumiendo es correcto navigator.geolocation.getCurrentPosition() es una llamada asíncrona finalizada mientras descarta esa alerta. Para solucionar esto, debe continuar su trabajo desde o en la función de devolución de llamada. Para hacer eso, reorganizar el código que se produzca cuando se termina, así:

function render() { 
    if(navigator.geolocation) { 
     navigator.geolocation.getCurrentPosition(function(position) { 
      var start = new google.maps.LatLng(position.coords.latitude,position.coords.longitude); 
      var end = '<?= $_REQUEST['destination'] ?>'; 
      var request = { 
       origin:start, 
       destination:end, 
       travelMode: google.maps.DirectionsTravelMode.DRIVING 
      }; 
      directionsService.route(request, function(response, status) { 
      if (status == google.maps.DirectionsStatus.OK) { 
       directionsDisplay.setDirections(response); 
      } 
      }); 
     }, function() { 
      handleNoGeolocation(browserSupportFlag); 
     }); 
     } else { 
     // Browser doesn't support Geolocation 
     handleNoGeolocation(); 
    } 
} 
+0

Eso lo hizo. ¡¡Gracias!! –

7

El "algo asíncrono" es la llamada a getCurrentPosition. La alerta tarda algo de tiempo, de modo que la llamada puede completarse e invocar la devolución de llamada que establece el valor de "inicio".

Puede intentar mover todo el fajo de código desde donde define "solicitud" en la devolución de llamada en getCurrentPosition. Eso lo retrasaría hasta que "inicio" definitivamente se establezca en un valor utilizable.

editar sí como Nick muestra en su ejemplo.

+0

Sí. Trabajó como un campeón. ¡Gracias! –

Cuestiones relacionadas