我正在使用带有 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 的多个模板中使用它。
最佳答案
谷歌地图的问题在于,一旦您初始化,它只会将自身附加到当前的 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
中。回调。
关于javascript - Meteor Google Maps Autocomplete 仅适用于多个模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26949103/