0

Google Maps Geocoder に住所から LatLng を返させ、その LatLng を中心にして地図を初期化しようとしています。

このトピックに関するいくつかの質問を見て、マップを最初に任意の中心で初期化してから再センタリングする必要があるという提案がありましたが、それは無駄に思えます。

以下のコードは、グローバルな緯度と経度をゼロに変更するまで正常に機能します。次に、geocder がアドレスで呼び出され、LatLng が正常に返されます。その後、空白のウィンドウが表示され、初期化関数のアラートがトリガーされることはありません。

0,0 で初期化してからセンタリングするルートに進む前に、これが機能しない理由を誰かが説明できますか?

ありがとう

var lat = 37.425593;
var lon = -122.075915;
var address = '1600 Amphitheatre Pky, Mountain View, CA';
var LatLon = new google.maps.LatLng(0, 0);

function initialize() {

    alert("2. "+LatLon);

    var mapOptions = {
        center: LatLon,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: LatLon,
        map: map
    });

}

if (lat == 0 && lon == 0) {
    alert('address = '+address);
    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
                LatLon = results[0].geometry.location;
                alert("1. "+LatLon);
                google.maps.event.addDomListener(window, 'load', initialize);
            } else {
                alert("No results found");
            }
        } else {
            alert("Geocoder failed: " + status);
        }
    });
} else {
    alert('lat/lon = '+lat+' '+lon);
    LatLon = new google.maps.LatLng(lat, lon);
    alert("1. "+LatLon);
    google.maps.event.addDomListener(window, 'load', initialize);
}
4

1 に答える 1

0

ジオコーダーは非同期です。コードをコンテキストに配置していませんが、座標を返すのにかかる時間は、座標がサーバーから返されたときにウィンドウの読み込みイベントが既に発生していることを意味する必要があるため、初期化関数は実行されません。onload イベントを使用してジオコード操作を開始する場合、または initialize を直接呼び出してページの下部にコードを配置する場合に機能します。これにより、ページが完全にレンダリングされるまで実行されません (マップのサイズが指定されます)。 ）。

<script type="text/javascript">
var address = '1600 Amphitheatre Pky, Mountain View, CA';
var LatLon = new google.maps.LatLng(0, 0);

function initialize(LatLon) {
    var mapOptions = {
        center: LatLon,
        zoom: 14,
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var marker = new google.maps.Marker({
        position: LatLon,
        map: map
    });

}

    var geocoder = new google.maps.Geocoder();
    geocoder.geocode({'address': address}, function(results, status) {
        if (status == google.maps.GeocoderStatus.OK) {
            if (results[0]) {
               var LatLon = results[0].geometry.location;
               initialize(LatLon);
            } else {
                alert("No results found");
            }
        } else {
            alert("Geocoder failed: " + status);
        }
    });
</script> 
</body>

実施例

于 2013-09-22T05:01:56.227 に答える