Fatal编程技术网
  • javascript/
  • 如何在函数外部重用Javascript变量

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

javascript api google-maps variables

如何在函数外部重用Javascript变量,javascript,api,google-maps,variables,latitude-longitude,Javascript,Api,Google Maps,Variables,Latitude Longitude,我正在尝试设置一张地图，提供从浏览器所在位置到拉斯维加斯的方向。以下是我的代码示例： <!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="te

我正在尝试设置一张地图，提供从浏览器所在位置到拉斯维加斯的方向。以下是我的代码示例：

<!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
变量，并在
源代码中重复使用：'mylat，mylong'，
调用什么？谢谢您的建议。

将它们向上移动一级，在功能之外

了解javascript中的变量作用域：

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

这对我很有用： -返回坐标后设置方向

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


谷歌地图API v3方向示例
var directionsService=new google.maps.directionsService（）；
var directionsDisplay=new google.maps.DirectionsRenderer（）；
var map=new google.maps.map（document.getElementById（'map'）{
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
navigator.geolocation.getCurrentPosition（GetLocation）；
函数GetLocation（位置）{
var mylat、mylong、request；
mylat=位置坐标纬度；
mylong=location.coords.longitude；
请求={
产地：迈拉+'，'+迈隆，
目的地：'35.580789，-105.210571'，
travelMode:google.maps.Directions travelMode.DRIVING
};
方向显示.setMap（地图）；
directionsDisplay.setPanel（document.getElementById（'panel'）；
路由（请求、功能（响应、状态）{
if（status==google.maps.directionstatus.OK）{
方向显示。设置方向（响应）；
}
});
}
您可以在函数范围内定义
mylat
，
mylong
变量。因此，它们只能在该函数内部访问

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

var mylat,
    mylong;

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

navigator.geolocation.getCurrentPosition(GetLocation);
关于变量范围的更多信息-

这里确实有两个问题被混淆了首先，JavaScript中的变量的作用域是声明它们的函数，这就是为什么
mylat
和
myLong
仅在
GetLocation
中可见的原因

Second，
GetLocation
函数是异步执行的回调函数。也就是说，在文本源代码中出现在它下面的代码将在函数体执行之前实际运行。只要您在
GetLocation
回调本身（在它调用的其他一些函数中为on）内执行依赖于这些值的所有操作，就可以了，而且不必将变量声明移到函数之外。像这样：

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
之外是不够的，每个人都会告诉您这缺少了第二点

请参见。

这些是函数范围中的私有变量。使它们成为全局的或由函数返回。这也不起任何作用，同时，提醒mylat和mylong也不起作用：这确实起作用，但它与将变量声明移动到更高的范围无关，与您在回调中执行所有操作无关。你的建议把两者混淆了。有很多很好的答案。我试过你的，它适合我的需要。谢谢。@lwburk谢谢你指出这一点。正如您在下面更详细地解释的，问题在于ayscn呼叫。我已经编辑了答案并对您的解决方案进行了升级。这并不能解决问题，因为
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);
        }
    });
}