流星谷歌地图自动完成只能一次多模板 [英] Meteor Google Maps Autocomplete only works once on multiple templates

问题描述

我使用的是谷歌的地方自动完成封装的流星，如果我让用户选择一个模板的位置，自动完成不会再在不同的模板工作。

I am using a Google Places autocomplete package with Meteor and if I have the user select a location in one template, the autocomplete won't work again in a different template.

例如，如果用户挑选为他们举办活动的自动完成位置，然后他们试图以设置配置文件设置他们的个人资料的位置，没有自动完成位置弹出。

For instance, if the user picks an autocomplete location for an event they are hosting, and then they try to set their profile location in the profile settings, no autocomplete locations pop up.

事实上，如果他们甚至启用自动完成下拉一个页面上（甚至没有选择的选择之一），也不会在其他网页上工作。

In fact, if they even activate the autocomplete dropdown on one page (without even selecting one of the options), it won't work on the other page.

下面是我的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>

我有地铁：加GOOGLEMAPS 包，我设置了googlePlaces.js像这样：

I have the mrt:googlemaps package added, and I have set a googlePlaces.js like so:

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

值得注意的是地指出，虽然自动完成不会再次文件更新后功能（与服务器重启），它将从客户端页面刷新后重新工作。

It is notable to state that although the autocomplete does not function again after a file update (with server restart), it will work again after a page refresh from the client.

基本上，我想看看如何获​​得多个模板这个工作在meteor.js一个很好的例子。

Basically, I would like to see a perfect example of how to get this working in multiple templates in meteor.js.

推荐答案

电动耶稣的回答是，工作的答案，但是：一个变量必须声明为将要使用谷歌的地方自动完成API的每个元素

Electric Jesus' answer is the answer that worked, HOWEVER: A variable must be declared for each element that is going to use the Google Places Autocomplete API.

他的解决方案：

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

Template.userUpdate.rendered = initAutoComplete;

Template.postSubmit.rendered = initAutoComplete;

有两个分开的输入字段，一个在每个模板。因此，必须有你想要商家信息自动填充API工作的每个输入字段变量。我改变了输入元素的ID回自动完成。这里是我的解决方案。注意变量的一对一的比率为输入字段

There are two separate input fields, one on each template. So, there must be a variable for each input field you want the Places Autocomplete API to work on. I changed the input element ID's back to "autocomplete". Here's my solution. Note the one-to-one ratio of variables to input fields.

    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;

有关其他人谁使用此解决方案，在我工作的实施，我已经删除了＆LT;脚本＆GT; 从我的HTML标签（没有在我的模板没有更多的JavaScript）

For others who use this solution, in my working implementation, I have removed the <script> tags from my HTML (there is no more javascript in my templates).

这篇关于流星谷歌地图自动完成只能一次多模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！