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

我也尝试在函数之外编写这些变量，看看它们突然变为null。我可以尝试保留mylat和mylong个变量并在origin: 'mylat,mylong',调用中重复使用？谢谢你的建议。

Answer 1

这里确实存在两个混淆的问题。 第一个，JavaScript中的变量的范围限定为声明它们的函数，这就是mylat和myLong仅在GetLocation中可见的原因。

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

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

4 个答案: