Question

我正在使用Meteor的Google商家信息自动填充功能包，如果我让用户在一个模板中选择一个位置，则自动填充功能不会再次在另一个模板中使用。

例如，如果用户为他们正在托管的活动选择自动填充位置，然后他们尝试在个人资料设置中设置其个人资料位置，则不会弹出自动填充位置。

事实上，如果他们甚至在一个页面上激活自动完成下拉菜单（甚至没有选择其中一个选项），它就不会在另一个页面上工作。

这是我的HTML：

<template name="userUpdate">

      <script>
        window.onload = function() {
          var autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocomplete')),{types: ['geocode'] }
          );
        };
        </script>
        <form class="main form" autocomplete="off">
                <label class="control-label" for="location">Location</label>
                    <div class="controls">

                    <div id="locationField">
                    <input id="autocomplete" name="userLocation" class="form-control" autocomplete="off" placeholder="Where you live." type="text">
                </div>
                    </div>
      <p>
        <h4 id="setLocation">{{currentUser.profile.location}}</h4>
        <input id="updateUser" type="submit" class="btn btn-primary" value="Update Profile" />
      </p>
      </form>
    </template>

这是第二个模板：

<template name="postSubmit">
            <form class="main form" autocomplete="off">

                    <div class="form-group">
                    <label class="control-label" for="title">Event Name</label>
                        <div class="controls">
                            <input name="title" id="title" type="text" value="" placeholder="Event name" class="form-control"/>
                        </div>
                    </div>

                    <div class="form-group">

            <!--begin google test-->

        <script>
        window.onload = function() {
          var autocomplete = new google.maps.places.Autocomplete(
            (document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
          );
        };
        </script>

                    <label class="control-label" for="location">Event Location</label>
                        <div class="controls">
                            <!--<input name="location" id="url" type="text" value="" placeholder="The location of the vent" class="form-control"/>-->
                        <div id="locationField">
                        <input id="autocompleteEventPost" name="location" autocomplete="off" placeholder="Event Location" type="text">
                    </div>
                        </div>
                    </div>
                <input type="submit" value="Submit" class="btn btn-primary"/>
            </form>
        </template>

我添加了mrt:googlemaps个包，并设置了googlePlaces.js，如下所示：

GoogleMaps.init({
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en',  //optional
'libraries': 'places'
 });

值得注意的是，虽然自动完成功能在文件更新后（服务器重启时）不再起作用，但在客户端刷新页面后它会再次起作用。

基本上，我想看看如何在meteor.js中使用多个模板的完美示例。

Answer 1

谷歌地图就是初始化之后，它只会附加在当前的DOM实例上。当您切换到另一个页面/模板时，Gmaps似乎失去了您刚刚创建的那些绑定，您将不得不正确地重新初始化。

你正在使用只运行一次的window.onload ..

请查看将模板中的<script>代码移至rendered模板事件：

var initAutoComplete = function() {
      var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
      );
};

Template.userUpdate.rendered = initAutoComplete;

Template.postSubmit.rendered = initAutoComplete;

确保你的时间正确。毕竟GoogleMaps API是异步的，甚至可能搞砸了这种初始化。您可以做的一件事就是将上面的代码包装在GoogleMaps.init回调中。

Answer 2

电耶稣＆＃39;答案是有效的答案，但是：必须为将要使用Google地方信息自动填充API的每个元素声明一个变量。

他的解决方案：

var initAutoComplete = function() {
  var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocompleteEventPost')),{types: ['geocode'] }
  );
};

Template.userUpdate.rendered = initAutoComplete;

Template.postSubmit.rendered = initAutoComplete;

有两个单独的输入字段，每个模板一个。因此，您希望Places Autocomplete API处理的每个输入字段都必须有一个变量。我将输入元素ID更改回"autocomplete"。这是我的解决方案。注意变量与输入字段的一对一比率。

    var initAutoComplete = function() {
      var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),{types: ['geocode'] }
      );
};

var initAutoCompletePost = function() {
      var autocomplete = new google.maps.places.Autocomplete(
        (document.getElementById('autocomplete')),{types: ['geocode'] }
      );
};

Template.userUpdate.rendered = initAutoComplete;

Template.postSubmit.rendered = initAutoCompletePost;

对于使用此解决方案的其他人，在我的工作实现中，我已从HTML中删除了<script>标记（我的模板中不再有javascript）。

Answer 3

我猜您应该将其更改为class="autocomplete"，ID不应该重复，因此document.getElementById('autocomplete')将始终返回它找到的第一个元素。从来没有使用google-maps，但我认为这可能是原因

Answer 4

其他任何答案都没有对我有效，因此我在点击文本输入时调用initAutoComplete（）并且对我来说效果更好。

SELECT TOP 2 dept
   FROM table 
   WHERE name='abc' AND title='aaaa'
   ORDER BY salary DESC;

编辑：结果不是很好，但不时会这样：

Template.myTemplate.events({
   'click #autocomplete': function(e,template) {
     initAutoComplete();
   }
});

var initAutoComplete = function() {
  var autocomplete = new google.maps.places.Autocomplete(
    (document.getElementById('autocomplete')),{types: ['geocode'] }
  );
};

Meteor Google地图自动填充功能仅适用于多个模板

4 个答案: