javascript - Meteor Google Maps Autocomplete 仅适用于多个模板

Question

我正在使用带有 Meteor 的 Google Places 自动完成包，如果我让用户在一个模板中选择一个位置，自动完成将不会在另一个模板中再次工作。

例如，如果用户为他们主持的事件选择一个自动完成位置，然后他们尝试在个人资料设置中设置他们的个人资料位置，则不会弹出自动完成位置。

事实上，即使他们甚至在一个页面上激活自动完成下拉菜单(甚至没有选择其中一个选项)，它也不会在另一页上工作。

这是我的 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 似乎失去了与您刚刚创建的那些绑定(bind)的联系，您将不得不正确地重新初始化。

而您正在使用 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 中。回调。