Question

那是在说些什么。这是基于Maps API v3中的路线的Google地图示例。

<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>

在那里看到“警报（'booga booga'）”？

有了这个，这一切都很棒。当我们点击该行来定义var请求时，注释out和var start是未定义的。

当我删除我放在那里的警报以向我展示var start的值时，我发现了这一点，并且它退出了工作状态。如果我要求它提醒我var start的值，它告诉我它是未定义的，但是当我们在几行之后定义var请求时它有一个有效的（和准确的！）值。

我怀疑这是一个时间问题 - 就像异步事情在我解除警报的那一刻有时间在后台完成。关于解决方法的任何想法？

Answer 1

您所假设的是正确的navigator.geolocation.getCurrentPosition()是在您解除该警报时完成的异步调用。要解决此问题，您需要从回调函数或在回调函数中继续工作。要做到这一点，请重新安排代码在完成时发生，如下所示：

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();
    }
}

Answer 2

“异步”是对getCurrentPosition的调用。警报占用一些时间，因此调用可以完成并调用设置“start”值的回调。

您可以尝试将整个代码块从您定义“请求”的位置移动到getCurrentPosition的回调中。这会延迟它，直到“开始”肯定设置为可用值。

编辑是的，就像Nick在他的例子中所示。

我见过最疯狂的JavaScript行为

2 个答案: