在 Meteor 中使用 Google 地方信息自动填充功能
Posted
技术标签:
【中文标题】在 Meteor 中使用 Google 地方信息自动填充功能【英文标题】:Using Google Places Autocomplete with Meteor 【发布时间】:2014-10-11 21:39:42 【问题描述】:所以我正在尝试将https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform 的搜索栏添加到我的 Meteor 应用程序中。 首先,我需要加载 Google Places 库。然而,该链接也尝试直接写入 DOM 以获取另一个链接。 Meteor 不允许,所以我决定像这样加载两个 js 文件。
Template.listingSubmit.rendered = function()
if (!this.rendered)
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=places";
document.body.appendChild(script);
var script = document.createElement("script");
script.type = "text/javascript";
script.src = "https://maps.gstatic.com/cat_js/maps-api-v3/api/js/17/13/%7Bmain,places%7D.js";
document.body.appendChild(script);
this.rendered = true;
;
这行得通吗? 我的下一个问题是如何初始化自动完成文本字段? 对应模板中的html很简单。
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" type="text">
</div>
现在我尝试添加
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),types: ['geocode']
);
到 Template.listingSubmit.rendered 但没有任何反应。我得到一个谷歌未定义的错误。出了什么问题?
【问题讨论】:
【参考方案1】:这是最终对我有用的解决方案:我添加了 mrt:googlemaps
包。
然后我像这样设置 googlePlaces.js:
GoogleMaps.init(
'sensor': true, //optional
'key': '***my api key***', //optional
'language': 'en', //optional
'libraries': 'places'
);
然后我为要使用自动完成 API 的每个输入字段设置一个变量,并将 template.render 设置为等于该变量,如下所示:
var initAutoCompleteProfile = 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 = initAutoCompleteProfile;
Template.postSubmit.rendered = initAutoCompletePost;
对于要使用它的每个元素,元素 ID 是“自动完成”的,但真正重要的是您为每个要为每个模板使用它的元素创建一个变量,然后设置该模板的 @ 987654325@ 等于那个变量。
这里的问题/解决方案: Meteor Google Maps Autocomplete only works once on multiple templates
【讨论】:
【参考方案2】:我想分享一下最终对我有用的方法 包不变,但js变了:
Template.myTemplateName.rendered = function ()
window.onload = function()
input = document.getElementById('autocomplete');
autocomplete = new google.maps.places.Autocomplete(input);
// When the user selects an address from the dropdown,
google.maps.event.addListener(autocomplete, 'place_changed', function()
// Get the place details from the autocomplete object.
var place = autocomplete.getPlace();
console.log("place: " + JSON.stringify(place) );
);
;
;
【讨论】:
【参考方案3】:我一直在处理同样的问题,只是遇到了一个解决方案。这就是我所做的。
首先,将以下package 添加到您的项目中:
`mrt add googlemaps`
或者,如果您使用的是流星 >= 0.9:
meteor add mrt:googlemaps
接下来,创建以下文件:/client/lib/googlePlaces.js
在这个js文件中加入以下代码:
GoogleMaps.init(
'sensor': false, //optional
'key': 'your api key here!', //optional
'language': 'en', //optional
'libraries': 'places'
);
显然用你的密钥替换 api 密钥!此代码将启动对 google api 的调用并将地点脚本下载到客户端。
现在,回答您有关如何使自动完成功能发挥作用的问题。您的 HTML 和 js 看起来不错,除了一件事。您需要将您的 js 包装在 window.onload 函数中,以便它等待下载 google api 脚本!
HTML
<div id="locationField">
<input id="autocomplete" placeholder="Enter your address" type="text">
</div>
JS
window.onload = function()
var autocomplete = new google.maps.places.Autocomplete(
(document.getElementById('autocomplete')),types: ['geocode']
);
;
我没有测试过你的 HTML/JS,但它看起来和我的很相似。
【讨论】:
这段代码大部分都有效,除了我必须将传感器设置为真。此外,每个模板只能使用一次。如果我在另一个模板上放置了自动完成功能,除非我在第一个模板中使用过一次,否则它不会工作,除非我刷新它。有什么建议吗? 我已经完全做到了,并得到一个 TypeError: a is undefined - 在加载的谷歌地图/地方脚本中,几乎不可能调试,因为它与加载的库有关。有任何想法吗?最近在 github 上的工作示例? 感谢 cmets。我会调查这些。上面的代码在我的项目中仍然为我工作。奇怪的。希望我们能深入了解这一点。 @Ajar - 你在使用任何其他 window.onload 事件吗?甚至jQuery?我相信 window.onload 只能定义一次?尝试使用 jquery 的: $(window).on("load",function() //把代码放在这里!);以上是关于在 Meteor 中使用 Google 地方信息自动填充功能的主要内容,如果未能解决你的问题,请参考以下文章