如何使用Handlebars将多个Google地图区域添加到div [英] How to append multiple Google Maps areas to divs using Handlebars
问题描述
我正在开发一个项目，在该项目中，我需要在Google地图小型地图旁显示数据，因为用户点击了他希望查看信息的项目。 p>基本上它是这样的：
- 用户点击他希望看到有关信息的标签
- 浏览器使用jQuery和Handlebars将单独的表格追加到屏幕的一侧，其中应该包含以下内容：
- Google Maps实例显示信息的来源位置
- 信息
尽管我无法管理让JS + jQuery + Handlebars组合起作用。我知道我需要创建一个帮助器来执行Handlebars模板中的JavaScript代码，但不知何故，在HB模板中的表格中添加Google Maps实例不起作用。
这是我目前正在处理的代码。
模板文件：
< script id =entry-templatetype =text / x-handlebars-template>
< section class =Infoid = {{id}}>
< header class =InfoHeader smallonclick =collapseInfobox（this）>
< p class =>< / p>
< / header>
< article class =hidden>
< table class =分析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代码：
函数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是信息div应该附加到的页面中的div部分
$（＃contentArea）。append（HTMLtemplate（context））;
}
好的，我想我已经设法解决这个问题，我花了几天的时间。
解决方案不是实际使用助手来实现谷歌地图实例到表中，而是做到这一点jQuery的ready（）函数调用。看起来，在使用助手时，Google Maps JS库不会在助手运行时找到要创建映射的地图画布div。使用ready（）函数调用div实际上是在插入任何内容之前创建的。
这个解决方法适用于我，希望这可以帮助其他可能遇到此问题的人：
模板文件：
< script id =entry-templatetype =text / x-handlebars-模板>
< section class =Infoid = {{id}}>
< header class =InfoHeader smallonclick =collapseInfobox（this）>
< p class =>< / p>
< / header>
< article class =hidden>
< table class =分析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代码：
函数addInfo（id，start，end）{
var context = {
id：id，
};
// contentArea是信息div附加到页面的div部分
$（＃contentArea）。append（HTMLtemplate（context））。 ready（function（）{
var minimapOptions = {
//你想要地图的所有选项，例如
disableDefaultUI：true，
draggable：false，
disableDoubleClickZoom：true，
center：new google.maps.LatLng（_Coords.lat，_Coords.lon），
zoom：13，
mapTypeId： google.maps.MapTypeId.ROADMAP
$ b $;
var minimap1 = new google.maps.Map（document.getElementById（minimap_1 _+ context.id），minimapOptions）;
}）;
}
I'm working on a project in which I need to show data next to a Google Maps minimap as user clicks on items of which he desires to see information from.
Basically it works like this:
- User clicks on a label he wishes to see information about
- Browser appends a separate table to the side of the screen using jQuery and Handlebars in which there should be:
- Google Maps instances showing the location the information is from
- The information
Though somehow I cannot manage to get the JS + jQuery + Handlebars combination to work. I understand that I need to create a helper to execute JavaScript code in Handlebars template, but somehow adding a Google Maps instance within the table in the HB template is not working.
Here's the code I'm working on at the moment. Thanks for any help!
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">{{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 code:
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));
}
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);
});
}
这篇关于如何使用Handlebars将多个Google地图区域添加到div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
