1

我正在做一个项目，当用户点击他希望从中查看信息的项目时，我需要在谷歌地图小地图旁边显示数据。

基本上它是这样工作的：

  1. 用户单击他希望查看有关信息的标签
  2. 浏览器使用 jQuery 和 Handlebars 将单独的表格附加到屏幕的一侧，其中应该有：
    • 显示信息来源位置的 Google 地图实例
    • 资料

虽然不知何故我无法让 JS + jQuery + Handlebars 组合工作。我知道我需要创建一个帮助程序来在 Handlebars 模板中执行 JavaScript 代码，但是以某种方式在 HB 模板的表中添加一个 Google Maps 实例不起作用。

这是我目前正在处理的代码。谢谢你的帮助！

模板文件：

<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

Okay, I guess I already managed to solve this issue I struggled with for couple of days.

Solution was not to actually use helper to implement the Google Maps instances to the table, but instead do this with jQuery's ready() function call. It seems that when using the helper, the Google Maps JS library does not find the map canvas div to which to create the map when the helper is ran. With ready() function call the div is actually created before anything is inserted there.

This workaround worked for me, hopefully this helpes also others who might encounter this issue:

Template file:

<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 code:

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 回答