Question

我不明白，这怎么可能发生？我只有1个变量，但它似乎有2个不同的值。请参阅下面的输出。这是网页的代码：

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
    var map;
    var geocoder;
    var center = new google.maps.LatLng(11.17840187,122.59643555);
    var marker = new google.maps.Marker();
    var info = new google.maps.InfoWindow();
    var latitude = 0.00;
    var longitude = 0.00;
    var address = "NO ADDRESS";
    var loaded = false;

    function initialize() {
        var mapProp = {
           center : center,
           zoom : 5,
           mapTypeId : google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
        geocoder = new google.maps.Geocoder();
        google.maps.event.addListener(map, "click", function (event) {
            latitude = event.latLng.lat();
            longitude = event.latLng.lng();
            center = new google.maps.LatLng(latitude,longitude);
            displayAddress();
            moveToCenter();
            console.log("Address : " + address)
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);

    function moveToCenter(){
        map.panTo(center);
        marker.setPosition(center);
        marker.setMap(map);
    }

    function displayAddress(){
        geocoder.geocode( {'latLng': center},
        function(results, status) {
          if(status == google.maps.GeocoderStatus.OK) {
            if(results[0]) {
              address = results[0].formatted_address;
            }
            else {
              address = "";
            }
            info.setContent("<b>" + address + "</b>");
            info.open(map,marker);
          }
        });
    }

    function setWidth(width){
        document.getElementById('googleMap').style.width = width + "px";
        google.maps.event.trigger(map, 'resize');
    }

    function setHeight(height){
        document.getElementById('googleMap').style.height = height + "px";
        google.maps.event.trigger(map, 'resize');
    }
</script>

<style>
    body
    {
        padding : 0; 
        margin  : 0;
        overlow : hidden;
    }
    #googleMap
    {
        width  : 600px;
        height : 600px;
        overlow : hidden;
    }
</style>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>

我的代码中有一个变量address，但我不明白为什么它有两个不同的值。这是怎么发生的？它是 Javascript Bug 吗？

这是输出：

Answer 1

我看到你现在要问的是什么。也许我们可以重新解释这个问题。

问：为什么当我在address中设置displayAddress()时，它会在地图中正确显示地址但仍然记录＆＃34;没有地址＆＃34;在控制台？

答：这是因为您已在代码中引入了异步处理。

您认为应该发生以下情况：

将address设置为＆＃34;无地址＆＃34;
调用displayAddress()，更改address和{的值也会在地图上显示它
记录更改的地址

实际发生的是此：

将address设置为＆＃34;无地址＆＃34;
致电displayAddress() - 异步流程geocode启动
记录地址（此处未更改）
异步操作完成，地址显示在地图上。

如果您想了解有关异步流程的更多信息以及如何从this SO question has lots of relevant information返回值。

Answer 2

我认为问题来自于修改address变量的代码是在console.log指令之后调用的。

事实上，以下所有代码：

if(status == google.maps.GeocoderStatus.OK) {
    if(results[0]) {
        address = results[0].formatted_address;
    }
    else {
        address = "";
    }
    info.setContent("<b>" + address + "</b>");
    info.open(map,marker);
}

包含在回调函数中，该函数传递给geocoder.geocode方法，然后在远程请求完成后执行。考虑到远程请求的响应时间（几十或几百毫秒），执行console.log语句后会发生这种情况。

Answer 3

仔细查看您的代码。

<application>

为什么当我在displayAddress（）中设置地址时，它是否在地图中正确显示地址但仍在控制台中记录“无地址”？

3 个答案: