未捕获的 ReferenceError：未定义纬度 [重复]

Question

可能重复：
JavaScript Variable Scope

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

"Uncaught ReferenceError: lat is not defined 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>

Answer 1

您至少有两个问题：

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

你可以在这里看到类似的问题和答案：unable to cope with the asynchronous nature of navigator.geolocation

Answer 2

如果你这样写会不会有问题：

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.");     
  }
} 

并为每个 ie 使用单独的回调调用它们

   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 使用相同的技术。注意：不要让方向显示和方向服务保持全局，你应该把整个东西变成一个类，这样它就更干净了，更面向对象