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>

上記は問題なく動作します。'address' 変数は適切に更新され、initialize() 関数の最後でコンソールにログを記録すると、適切に表示されます。問題は、同じ変数をページのさらに下のコンソールに記録しようとした場合です。

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

それをしようとすると、「未定義」になります。私はjavascriptを初めて使用しますが、変数が関数の外で宣言されている場合、それはグローバル変数であり、どこからでもアクセスできるはずであると理解していました。明らかな何かが欠けているように感じますが、何がわかりません (検索にかなりの時間を費やしました!)。

私の推測では、ページが読み込まれるまで initialize() が呼び出されないことに関係しているのですが、ページの読み込みが完了する前に「アドレス」がログに記録されようとしています。それが問題である場合、それを修正する方法がわかりません。

また、上記のコードは最善の方法ではないと確信していますが、これは実際にはより多くの学習経験です。ありがとう！

4

3 に答える 3

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 に答える
1

あなたの勘は正しいです。ページのさらに下にあるコードは、initializeメソッドが呼び出される前に実行されます。 window.loadimages を含む 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 に答える
0

問題は<script>、ブラウザがページをロードするとすぐに 2 番目の要素が実行されることです。最初のブロックで、load イベントの DOM リスナーを追加しますinitialize()。ただし、ブラウザがページを完全にロードして構築した後で実行されます。

コールバックで決定された後に値をログに記録するとgeocoder.geocode()、適切な値が出力されるはずです。

于 2013-10-20T15:40:30.430 に答える