3

我试图让下面的代码工作（console.log 只是为了看看发生了什么）。我已经在任何函数之外声明了全局变量，但它似乎只是在函数内部更新它们。

<script type="text/javascript">

var map;
var geocoder;
var address;

function initialize(){
    geocoder = new google.maps.Geocoder();

    var mapOptions = {
        center:new google.maps.LatLng(-76.146294, 43.052081),
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        zoom: 15,
        streetViewControl: false
    };

    map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);
    loadAddress();
    console.log("initialize function: " + address); //this correctly returns the updated address
}

function loadAddress(){
    var property = <?php echo json_encode(urlencode($Residential['ReAddress'])); ?>;
    var zipCode = <?php echo json_encode($Residential['zipCode']); ?>;
    address = property + "," + zipCode;
    geocoder.geocode({'address': address}, function(result, status){
        if(status === "OK"){
            map.setCenter(result[0].geometry.location);
            var marker = new google.maps.Marker({
                map: map,
                position: result[0].geometry.location
            });
        }
        else {
            alert("Failed to geocode: " + status);
        }
    });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

以上工作正常 - “地址”变量正确更新，当我在 initialize() 函数结束时将其记录到控制台时，它会正确显示。问题是如果我尝试将相同的变量记录到页面下方的控制台：

<script type="text/javascript">
console.log("further down page: " + address); //this comes back as 'undefined'
</script>

当我尝试这样做时，我只是得到'未定义'。我对javascript很陌生，但我的理解是，如果变量在任何函数之外声明，它就是一个全局变量，它应该可以在任何地方访问。我觉得我错过了一些非常明显的东西，但我不知道是什么（我花了很多时间搜索！）。

我的预感是它与在页面加载后才调用 initialize() 有关，但在页面完成加载之前试图记录“地址”。如果是这个问题，我不知道如何解决。

另外，我确信上面的代码不是最好的做事方式，但这实际上更像是一种学习体验。谢谢！

4

3 回答 3

1

你的预感是正确的。在调用您的initialize方法之前，页面下方的代码正在执行。 window.load在加载 DOM 之前不会触发，包括图像：

load 事件在文档加载过程结束时触发。至此，文档中的所有对象都在 DOM 中，所有图片和子帧都加载完毕。

一个简单的解决方法是立即定义address。它的组件在页面上是静态的，没有理由在函数内部发生这种情况。

    var property = <?php echo json_encode(urlencode($Residential['ReAddress'])); ?>;
    var zipCode = <?php echo json_encode($Residential['zipCode']); ?>;
    var address = property + "," + zipCode;

    function loadAddress() {
      // ...
    }
于 2013-10-20T15:46:33.247 回答
1

问题是该geocoder.geocode函数是异步的：它不会阻塞代码，执行以下行，但在服务器响应之前不会调用内部回调。

这意味着您必须将console.log行放在回调中或从回调中调用的函数中：

geocoder.geocode({'address': address}, function(result, status){
    if(status === "OK"){
        map.setCenter(result[0].geometry.location);
        var marker = new google.maps.Marker({
            map: map,
            position: result[0].geometry.location
        });
    } else {
        alert("Failed to geocode: " + status);
    }
    otherFunc();
});

function otherFunc(){
    console.log("further down page: " + address);
}
于 2013-10-20T15:40:23.343 回答
0

问题是第二个<script>元素在浏览器加载页面时立即执行。在您的第一个块中，您为加载事件添加 DOM 侦听器，它应该调用initialize(). 但是，稍后会在浏览器完全加载并构建页面时执行。

如果您在回调中确定该值后记录该值，geocoder.geocode()则应打印正确的值。

于 2013-10-20T15:40:30.430 回答