Question

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Streetview Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=<?=APIKEY?>"
        type="text/javascript"></script>
<script type="text/javascript">

var myPano;
var newPoint;

function initialize() {
  var fenwayPark = new GLatLng(42.345573,-71.098326);
  var address = "1600 Amphitheatre Parkway, Mountain View, CA, USA";

  var geocoder = new GClientGeocoder();
    geocoder.getLatLng(
        address,
        function(point) {
            if (!point) {
                alert(address + " not found");
            } else {
                newPoint = point;
                alert("inside of function: " + newPoint);
            }
        });
    alert("outside of function: " + newPoint);
  panoramaOptions = { latlng:fenwayPark };
  myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
  GEvent.addListener(myPano, "error", handleNoFlash);
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert("Error: Flash doesn't appear to be supported by your browser");
    return;
  }
}  
</script>

当我运行此代码时，警报（“函数外部：”+ newPoint）;没有任何价值，但在功能警报（“功能内部：”+ newPoint）;它得到了。

完整代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google Maps JavaScript API Example: Simple Streetview Example</title>
<script src="http://maps.google.com/maps?file=api&amp;v=2.x&amp;key=ABQIAAAAgVzm2syhpm0A5rAKFMg3FBS-DTtkk0JB-Y_gKL-3MRZwBHch9RSjWJj17-fEEecjCvYeo1i7w_1yPw"
        type="text/javascript"></script>
<script type="text/javascript">

var myPano;

function initialize() {

    var geocoder = new GClientGeocoder();

    var address = "1600 Amphitheatre Parkway, Mountain View, CA, USA";
    geocoder.getLatLng(
        address,
        function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            panoramaOptions = { latlng:point };
            myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
            GEvent.addListener(myPano, "error", handleNoFlash);
        }
    });
}

function handleNoFlash(errorCode) {
  if (errorCode == FLASH_UNAVAILABLE) {
    alert("Error: Flash doesn't appear to be supported by your browser");
    return;
  }
}  
</script>

我想在打开页面时显示地址的街景：1600 Amphitheatre Parkway，Mountain View，CA，USA

Answer 1

内部函数是一个回调函数。意思是，它等待地理编码api调用在执行之前完成运行。这称为异步执行。您会注意到，即使之前写入了内部警报，外部警报也会在内部警报之前触发。

任何需要有效newPoint值的代码都需要在回调函数中执行，就像内部警报一样。

Answer 2

getLatLng()是异步的。

您拨打getLatLng()，过了一段时间后，它会使用数据调用您的回调。在调用getLatLng()之后立即调用“函数外”代码，之后异步调用“函数内部”回调。

Answer 3

您使用异步getLatLng()修复了问题。您的新代码唯一的问题是您请求的地址没有全景图（将'1600'取出并且它将起作用）。有一个函数将返回最近的全景点：getNearestPanoramaLatLng()。如果没有附近的全景图，它将返回null。以下是在代码中使用它的方法：

function initialize() {

    var geocoder = new GClientGeocoder();
    var panoClient = new GStreetviewClient();

    var address = "1600 Amphitheatre Parkway, Mountain View, CA, USA";

    geocoder.getLatLng(
    address,
    function(point) {
        if (!point) {
            alert(address + " not found");
        } else {
            panoClient.getNearestPanoramaLatLng(point, function(newPoint) {
                if (newPoint == null) {
                    alert("no panorama found");
                    return;
                }
                panoramaOptions = { latlng:newPoint};
                myPano = new GStreetviewPanorama(document.getElementById("pano"), panoramaOptions);
                GEvent.addListener(myPano, "error", handleNoFlash);
            });
        }
    });
}

Answer 4

因为您调用内部警报的回调函数会在您的外部警报之后运行。

尝试将您的外部警报推迟一秒钟，您将看到正确的值将被警告

setTimeout(function(){ alert(newPoint); }, 1000);

这是因为您调用内部警报的函数是异步的

编辑：请注意，以上是不好的做法，只应用于帮助您了解发生的事情和原因。

javascript全局变量问题

4 个答案: