Question

我使用以下代码：

Template.categories.rendered = function() {
  var map = new GMaps({
      div: '#map_canvas',
      lat: -12.043333,
      lng: -77.028333
  });
}

执行Gmaps.js插件 - 并且它有效，每次我提交表单时，布局都会重新渲染，我的谷歌地图也会重新绘制。

我还使用常量来试图隔离它......然后隔离..没什么。（它不在模板中）

 {{#constant}}
        <div id="map_canvas"></div>
 {{/constant}}

我尝试将Template.categories.rendered更改为Template.categories.created但我收到了一堆错误。我希望“创建”只执行一次..

编辑我制作了一个新模板'maps'并将表格从地图中分离

但我担心这不是一个可行的解决方案，因为我想在地图和表格之间进行沟通..特别是我想获得经纬度并自动填写一个字段......

Answer 1

尝试将地图放在单独的模板中，例如

<template name="categories">
    {{>map}}
    {{>other_form_with_submit_button}}
</template>

所以你把你的地图放在了

<template name="map">
    <div id="map_canvas></div>
</template>

<template name="other_form_with_submit_button">
    .. your form data
</template>

你仍然可以像往常一样与地图沟通，DOM甚至没有注意到差异

Template.other_form_with_submit_button.events({
    'submit' : function() {
        var lat = "-12.043333",
        var lng = "-77.028333";
        var map = new GMaps({
           div: '#map_canvas',
           lat: -12.043333,
           lng: -77.028333
        });
    }
}

同样，在移动地图时，您可以附加一个监听器并让它按照您的意愿更改文本框：

Template.map.rendered = function() {
var map = new GMaps({
      div: '#map_canvas',
      lat: -12.043333,
      lng: -77.028333
});

//Im not sure what you're using to get the location but this is the example if moving the center could be used
google.maps.event.addListener(map, 'center_changed', function() {
    $("#lat").val(map.getPosition().lat());
    $("#lng").val(map.getPosition().lng());
}

});

使用Meteor的Template.rendered用于谷歌地图

1 个答案: