3

可能重复：
JavaScript 变量范围

我的脚本有问题，我想从 pos 函数中获取值 lat, lng，但是当我在控制台中检查元素时，我得到了这个错误：

“未捕获的 ReferenceError：lat 未定义 TEST.html:30（匿名函数）”

第 30 行是：var latlng = new google.maps.LatLng (lat, lng); 这是我的完整代码：

<script type="text/javascript">

navigator.geolocation.getCurrentPosition (function (pos){
  lat = pos.coords.latitude;
  lng = pos.coords.longitude;
});

  var directionsDisplay;
  var directionsService = new google.maps.DirectionsService();
  var map;
  var latlng = new google.maps.LatLng (lat, lng);
  var oceanBeach = new google.maps.LatLng(-6.2501199999999999,106.75937);

  function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapOptions = {
      zoom: 14,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: latlng
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    directionsDisplay.setMap(map);
  }

  function calcRoute() {
    var selectedMode = document.getElementById("mode").value;
    var request = {
        origin: latlng,
        destination: oceanBeach,
        // Note that Javascript allows us to access the constant
        // using square brackets and a string value as its
        // "property."
        travelMode: google.maps.TravelMode[selectedMode]
    };
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        directionsDisplay.setDirections(response);
      }
    });
  }
</script>
4

2 回答 2

0

如果你这样写会不会是一个问题：

navigator.geolocation.getCurrentPosition (function (pos){
     var lat = pos.coords.latitude;
     var lng = pos.coords.longitude;
     var latlng = new google.maps.LatLng (lat, lng);
     var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);
});

它大喊大叫的原因是因为 lat 与在回调函数之外定义的 latlng 和 oceanBeach 定义在不同的范围内，并且在那里无法访问它

更新

考虑到您的情况，您可以使用回调来解决您的问题，即将 getCurrentPosition 变成自己的函数，例如：

 function getCurrentLocation(callback) {
   if(navigator.geolocation) {
     navigator.geolocation.getCurrentPosition(function(pos) {
     var lat = pos.coords.latitude;
     var lng = pos.coords.longitude;
     callback(new google.maps.LatLng(lat,lng), new google.maps.LatLng(-6.2501199999999999,106.75937));
   });
  }
  else {
   throw new Error("Your browser does not support geolocation.");     
  }
}

并为每个即做单独的回调调用它们

   getCurrentLocation(function(latlng,oceanBeach){
  // work with latlng and ocean beach here
  });

现在终于从每个函数调用函数，即

<script type="text/javascript">

var directionsDisplay;
var directionsService = new google.maps.DirectionsService();

function initialize() {
 getCurrentLocation(function(latlng,oceanBeach){
   directionsDisplay = new google.maps.DirectionsRenderer();
   var mapOptions = {
   zoom: 14,
   mapTypeId: google.maps.MapTypeId.ROADMAP,
   center: latlng
   }
   map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
   directionsDisplay.setMap(map);
 });

}

</script>

并对 calcRoute 使用相同的技术。注意：而不是保持方向显示和方向服务全局，你应该把这整个东西变成一个类，这样它就更干净了，更面向对象

于 2013-01-29T23:55:03.753 回答
0

你至少有两个问题：

  1. 变量的范围（它们在子函数中定义，在您尝试使用它们的范围内不可用）

  2. 该getCurrentPosition()函数是异步的。这意味着它会在您调用它之后完成一段时间，并且仅在它调用完成回调函数时才完成。因此，在您尝试使用函数调用后的结果时，它还没有完成。

要处理getCurrentPosition()异步，您必须这样做：

navigator.geolocation.getCurrentPosition (function (pos){
    var lat = pos.coords.latitude;
    var lng = pos.coords.longitude;
    var latlng = new google.maps.LatLng (lat, lng);
    var oceanBeach = new google.maps.LatLng(37.7683909618184, -122.51089453697205);      
    // any further code that uses these variables
});

// no code here that uses the results of getCurrentPosition() 
// because it has not completed yet

您可以在这里看到类似的问题和答案：无法应对 navigator.geolocation 的异步性质

于 2013-01-29T23:53:13.363 回答