5

- 序章

こんにちは、私のコースでは、フェスティバルのすべてのイベントを 1 つのページに配置する必要がある個別のプロジェクトがあります。これは JavaScript コースであるため、ほとんどのタスクは JavaScript で処理する必要があります。

問題は、良いウェブサイトを提供するために、AJAX からのデータが取得されて処理されるまでユーザーが待たなければならないというメッセージを含む読み込み中の gif ファイルを使用していることです。

これは私の HTML スニペットです

<!-- showing loading screen -->
<div id="startup">
    <h3>Please wait until the data is done with loading</h3>
    <img src="images/ajax_load.gif" alt="loading icon" id="load_icon" />
</div>
<!-- actual content (will be displayed after loading phase) -->
<div id="siteContent">
    <div id="top">
        <label><input type="checkbox" name="cbDisabilities" id="cbDisabilities">Accessible for disabilities</label>
        <label><input type="checkbox" name="cbFree" id="cbFree">for free</label>
        <select id="selectCat">
            <option selected="selected">&nbsp;</option>
        </select>
    </div>
    <div id="mapBox"></div>
    <div id="dateBox" class="layout"></div>
    <div id="eventBox" class="layout borders"></div>
</div>
<footer>
    <p>Gentse Feesten Infos &ndash; &copy; name here TODO</p>
</footer>

上記で、両方のdivに次のCSSもあり、

div#siteContent {
    display: none;
}
/* style google map box */
div#mapBox {
    display: block;
    height : 500px;
    width : 500px;
    margin-top : 5px;
}

ご覧のとおり、実際のコンテンツは非表示になっているため、h3 テキストを含むロード イメージのみが表示されます。ここで、AJAX 呼び出しが完了したら、イベントの場所のマーカーをマップに追加する必要があります。その間、取得した JSON データも処理します。これが完了したら、loading.gif アニメーションで div を削除し、実際のコンテンツを表示したいと考えています。

これは、データがどのように処理されているかの画像でもあります (マップの初期化 = GPS 位置の読み取り + 現在位置マーカーの配置 + マップのロード)。 ここに画像の説明を入力

データを処理しているときにマップに複数のマーカーを追加する必要があるため、AJAX 呼び出しが完了する前にマップを初期化する必要があります。地図がないと、Google マップ マーカーを追加するときにエラーが発生します。

これは、ロード時の JavaScript スニペットです。AJAX を呼び出すloadData()とGoogle マップを初期化するplaceMap(currentLocation)の 2 つのメソッドがあります。

window.addEventListener('load', function() {

    // get json data - going to call AJAX
    loadData();

    // getting current location by geocoder
    var getGeoLocation = new google.maps.Geocoder();
    var currentPosition;

    if(navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(position) {
            currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude); 
            placeMap(currentPosition);
        }, function() {
            handleError(100);
        });
    }
    else {
    handleError(200);
    }
    // other tasks omitted
});

これは、マップがどのように初期化およびレンダリングされるかです (currentMap は、Google マップ オブジェクトへの参照を保持するグローバル変数です)。

var placeMap = function(location) {
    var mapOptions = {
        zoom : 18,
        center : location,
        disableDefaultUI : true, // remove UI
        scaleControl : true,
        zoomControl : true,
        panControl : true,
        mapTypeId : google.maps.MapTypeId.ROADMAP
    };
    currentMap = new google.maps.Map($("mapBox"), mapOptions);
    // current position
    var mapMarker = new google.maps.Marker({
        position : location,
        map : currentMap,
        zIndex : 255
    });
    google.maps.event.addListenerOnce(currentMap, 'idle', setActive);
}

- 私の問題

しかし、私の問題は、ロード時に display:none を使用すると、マップ ウィンドウがうまくレンダリングされないことです。インライン (デフォルトのブラウザー表示スタイル) に切り替えると、ボックスに灰色の領域があり、マップが部分的にレンダリングされます。

- すでに試した解決策

このサイトにある解決策は既に試しました。

  1. ここ- 結果: この質問者と同じ表示結果、その灰色の領域が得られます。しかし、それは私の問題を解決しませんでした。
  2. ここ- 結果: レンダリングなし (ボックスが折りたたまれています)。
  3. ここ- 結果 : (2) と同じ。

- これまでのところ最善の解決策ですが、

これまでのところ、次のコマンドで最高の結果が得られました

// display content
$("startup").style.display = "none";
$("siteContent").style.display = "inline";
google.maps.event.trigger(currentMap, 'resize');

(startup = 読み込み中の gif 画像を含む div と siteContent = 実際のコンテンツ) .

これにより、表示された後、マップが正しくレンダリングされます。しかし、ここでは、残念ながら地図は GPS 位置を中心としていません。GPS マーカーは左上隅にあります。

div#siteContent でdisplay="none" を使用せずにサイトを表示している場合、すべてが意図したとおりに機能します (Google マップは GPS 位置がマップの中心に正しく表示されます)。

誰かがこの小さなレンダリングの問題を解決する方法を知っていますか? できればjQueryを使用しないでください。

4

3 に答える 3

0

サーバーから AJAX 応答を取得したら、マップを作成できます。以下は簡単な例です（jqueryなし）：

function loadData(callback) {
    var oReq = new XMLHttpRequest();
    oReq.open("GET", '/some/url', true);
    oReq.onload = callback;
    oReq.send();
}

この関数は、AJAX リクエストが完了した後に実行されるコールバックを受け入れます。次に、コード：

window.addEventListener('load', function() {

    // get json data - going to call AJAX
    loadData(function(oReq) {
        var response = oReq.response;
        // parse ajax response .... (code omitted)


        // getting current location by geocoder
        var getGeoLocation = new google.maps.Geocoder();
        var currentPosition;

        if(navigator.geolocation) {
            navigator.geolocation.getCurrentPosition(function(position) {
                currentPosition = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

                // Now you can hide loading gif show your site content
                document.getElementById('startup').style.display = 'none';
                document.getElementById('siteContent').style.display = 'block';

                // Create map.
                placeMap(currentPosition);

                // .... add markers here.

            }, function() {
                handleError(100);
            });
        }
        else {
        handleError(200);
        }
        // other tasks omitted
    });
});

さらに良い解決策は、カスタム オーバーレイを使用してマップのすぐ上に読み込み中のウィジェットを表示することです。

于 2013-08-06T22:11:51.460 に答える
0

i don't speak spanish but understood this answer still, and because it corrected a bug in my script, i'll try to translate it here and hope that can helps :

i hazardously discovered the solution to this problem. i have created a function called Mapa() in order to initialize google maps. in my case, i only use ajax and load the informations dynamicaly.

1) add a resize event : google.maps.event.trigger(currentMap, 'resize');

2) execute the Mapa function with jquery onload (doesn't work yet)

3) i started by executing the function after 1 second, then less, less and ... it worked perfectly at 0 milisecond so here is the solution : setTimeout(Mapa,0);

that works!

于 2014-04-06T04:56:15.087 に答える