所以我想添加 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 但没有任何 react 。我收到一个谷歌未定义错误。什么地方出了错?
最佳答案
我一直在处理同样的问题,只是遇到了一个解决方案。这就是我所做的。
首先,添加以下package到您的项目:
`mrt add googlemaps`
或者,如果您使用的是 meteor >= 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'
});
显然,用您的 key 替换 api key !此代码将启动对 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,但它看起来和我的非常相似。
关于google-maps - 将 Google Places 自动完成与 Meteor 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/25372387/