如何在函数之外重用 Javascript 变量

Question

我正在尝试设置一个地图，提供从浏览器所在位置到拉斯维加斯的路线。这是我的代码示例：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps API v3 Directions Example</title>
<script type="text/javascript"
       src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body style="font-family: Arial; font-size: 12px;">
<div style="width: 600px;">
 <div id="map" style="width: 280px; height: 400px; float: left;"></div>
 <div id="panel" style="width: 300px; float: right;"></div>
</div>

<script type="text/javascript">


navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
var mylat = location.coords.latitude;
var mylong = location.coords.longitude;
}


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

 var map = new google.maps.Map(document.getElementById('map'), {
   zoom:7,
   mapTypeId: google.maps.MapTypeId.ROADMAP
 });

 directionsDisplay.setMap(map);
 directionsDisplay.setPanel(document.getElementById('panel'));

 var request = {
    origin: 'mylat,mylong',
destination: '35.580789,-105.210571',
   travelMode: google.maps.DirectionsTravelMode.DRIVING
 };

 directionsService.route(request, function(response, status) {
   if (status == google.maps.DirectionsStatus.OK) {
     directionsDisplay.setDirections(response);
   }
 });

</script>
</body>
</html>

如果我在

mylat

和

mylong

中进行硬编码，那么页面将加载得很好。我还使用以下内容来验证共享位置时是否正确填充了这些值：

function GetLocation(location) {
var mylat = location.coords.latitude;
var mylong = location.coords.longitude;
document.write(mylat);
document.write(mylong);
}

我也尝试将这些变量写入函数外部，发现它们突然为空。我可以尝试如何保留

mylat

和

mylong

变量并在

origin: 'mylat,mylong',

调用中重用？

Answer 1

这里确实有两个问题令人困惑。首先，JavaScript 中的变量的作用域为声明它们的函数，这就是为什么

mylat

和

myLong

仅在

GetLocation

内部可见。

第二，

GetLocation

函数是一个异步执行的回调函数。也就是说，在文字源中出现在其下方的代码实际上将在函数体执行之前运行。这很好——并且没有必要将变量声明移到函数之外——只要您在 GetLocation 回调本身内部执行依赖于这些值的所有操作（在它调用的其他一些函数中））。像这样：

var directionsService = new google.maps.DirectionsService();
var directionsDisplay = new google.maps.DirectionsRenderer();
var map = new google.maps.Map(document.getElementById('map'), {
    zoom:7,
    mapTypeId: google.maps.MapTypeId.ROADMAP
});

navigator.geolocation.getCurrentPosition(GetLocation);
function GetLocation(location) {
    var mylat= location.coords.latitude;
    var mylong = location.coords.longitude;
    var request = {
        origin: mylat + ',' + mylong,
        destination: '35.580789,-105.210571',
        travelMode: google.maps.DirectionsTravelMode.DRIVING
    };
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('panel'));
    directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
        }
    });
}

简单地将声明移到

GetLocation

之外是不够的

，每个告诉你这一点的人都忽略了第二点。请参阅

JSFIDDLE 上的工作示例

。

Answer 2

<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <title>Google Maps API v3 Directions Example</title> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> </head> <body style="font-family: Arial; font-size: 12px;"> <div style="width: 600px;"> <div id="map" style="width: 280px; height: 400px; float: left;"></div> <div id="panel" style="width: 300px; float: right;"></div> </div> <script type="text/javascript"> var directionsService = new google.maps.DirectionsService(); var directionsDisplay = new google.maps.DirectionsRenderer(); var map = new google.maps.Map(document.getElementById('map'), { zoom:7, mapTypeId: google.maps.MapTypeId.ROADMAP }); navigator.geolocation.getCurrentPosition(GetLocation); function GetLocation(location) { var mylat,mylong,request; mylat= location.coords.latitude; mylong = location.coords.longitude; request = { origin: mylat+','+mylong, destination: '35.580789,-105.210571', travelMode: google.maps.DirectionsTravelMode.DRIVING }; directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById('panel')); directionsService.route(request, function(response, status) { if (status == google.maps.DirectionsStatus.OK) { directionsDisplay.setDirections(response); } }); } </script> </body> </html>

Answer 3

阅读 javascript 中的变量作用域：

http://www.mredkj.com/tutorials/reference_js_intro_ex.html

您还可以将它们与您的函数一起返回，在调用它时检索。

Answer 4

mylat

、

mylong

变量。所以它们只能在这个函数内部访问。

你应该在函数外部定义变量，例如：

var mylat, mylong; function GetLocation(location) { mylat = location.coords.latitude; mylong = location.coords.longitude; } navigator.geolocation.getCurrentPosition(GetLocation);

有关变量范围的更多信息 -

http://msdn.microsoft.com/en-us/library/bzt2dkta(v=vs.94).aspx

如何在函数之外重用 Javascript 变量

问题描述投票：0回答：4

4个回答

最新问题

如何在函数之外重用 Javascript 变量

问题描述 投票：0回答：4

4个回答

最新问题

问题描述投票：0回答：4