1

私は、ユーザーが情報を見たいアイテムをクリックしたときに、Googleマップのミニマップの横にデータを表示する必要があるプロジェクトに取り組んでいます。

基本的には次のように機能します。

  1. ユーザーが情報を見たいラベルをクリックします
  2. ブラウザは、jQueryとハンドルバーを使用して画面の横に別のテーブルを追加します。
    • 情報の出所を示すGoogleマップインスタンス
    • 情報

どういうわけか、JS +jQuery+ハンドルバーの組み合わせを機能させることができません。HandlebarsテンプレートでJavaScriptコードを実行するためのヘルパーを作成する必要があることは理解していますが、どういうわけか、HBテンプレートのテーブル内にGoogleMapsインスタンスを追加しても機能しません。

これが私が現在取り組んでいるコードです。助けてくれてありがとう！

テンプレートファイル：

<script id="entry-template" type="text/x-handlebars-template">
<section class="Info" id={{id}}>
    <header class="InfoHeader small" onclick="collapseInfobox(this)">
        <p class=""></p>
    </header>

    <article class="hidden">
        <table class="Analyses" border="1">
        <tr>
            <td class="minimap"><div id="minimap_1_{{id}}" class="minimap">{{miniMap_1 context}}</div></td>
            <td class="graph"><div>{{ graph_1 }}</div></td>
        </tr>
        </table>
    </article>
</section>
</script>
<script type="text/javascript">
var HTMLsource = $("#entry-template").html();
var HTMLtemplate = Handlebars.compile(HTMLsource);
</script>

JavaScriptコード：

function addInfo(id, start, end) {

var context = { 
    id: id, 
};

Handlebars.registerHelper('miniMap_1', function(data) {
    var minimapOptions = {
        disableDefaultUI: true,
        center: new google.maps.LatLng(_Coords.lat, _Coords.lon),
        zoom: 13,
    };
    var minimap1 = new google.maps.Map(document.getElementById(this), minimapOptions);

});

// contentArea is a div section in the page to which the info div should be appended

$("#contentArea").append(HTMLtemplate(context));
}
4

1 に答える 1

2

さて、私はすでに数日間苦労していたこの問題を解決することができたと思います。

解決策は、実際にヘルパーを使用してGoogle Mapsインスタンスをテーブルに実装するのではなく、jQueryのready（）関数呼び出しを使用してこれを行うことでした。ヘルパーを使用している場合、Google Maps JSライブラリは、ヘルパーの実行時にマップを作成するマップキャンバスdivを見つけられないようです。ready（）関数呼び出しを使用すると、divは、何かが挿入される前に実際に作成されます。

この回避策は私にとってはうまくいきました。うまくいけば、これはこの問題に遭遇する可能性のある他の人にも役立つでしょう：

テンプレートファイル：

<script id="entry-template" type="text/x-handlebars-template">
<section class="Info" id={{id}}>
    <header class="InfoHeader small" onclick="collapseInfobox(this)">
        <p class=""></p>
    </header>

    <article class="hidden">
        <table class="Analyses" border="1">
        <tr>
            <td class="minimap"><div id="minimap_1_{{id}}" class="minimap"></div></td>
            <td class="graph"><div>{{ graph_1 }}</div></td>
        </tr>
        </table>
    </article>
</section>
</script>
<script type="text/javascript">
var HTMLsource = $("#entry-template").html();
var HTMLtemplate = Handlebars.compile(HTMLsource);
</script>

JavaScriptコード：

function addInfo(id, start, end) {

    var context = { 
        id: id, 
    };

    // contentArea is a div section in the page to which the info div should be appended

    $("#contentArea").append(HTMLtemplate(context)).ready( function() {
        var minimapOptions = {

            // All options you'd like the map to have, e.g.

            disableDefaultUI: true,
            draggable: false,
            disableDoubleClickZoom: true,
            center: new google.maps.LatLng(_Coords.lat, _Coords.lon),
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP

        };
        var minimap1 = new google.maps.Map(document.getElementById("minimap_1_"+context.id), minimapOptions);
});
}
于 2012-04-04T15:51:24.847 に答える