Google maps 使用Google Places与Meteor自动完成

因此，我正在尝试将的搜索栏添加到我的Meteor应用程序中。 首先，我需要加载GooglePlaces库。但是，该链接也尝试直接写入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>

---

到Template.listingSubmit.rendered，但什么也没有发生。我得到一个谷歌未定义的错误。出了什么问题？

我一直在处理同一个问题，刚刚找到了一个解决方案。这就是我所做的

首先，使用将以下内容添加到项目中：

`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'
});

显然，用您的密钥替换api密钥！这段代码将启动对GoogleAPI的调用，并将places脚本下载到客户端

现在，回答您关于如何使自动完成工作的问题。你的HTML和js看起来不错，除了一件事。您需要将js包装在window.onload函数中，以便它等待下载google api脚本

HTML

<div id="locationField">
  <input id="autocomplete" placeholder="Enter your address" type="text">
</div>

---

我还没有测试过你的HTML/JS，但它看起来和我的非常相似。

我想分享一下最终对我有用的东西
包保持不变，但js发生了变化：

Template.myTemplateName.rendered=function（）{
window.onload=函数（）{
输入=document.getElementById（'autocomplete'）；
autocomplete=newgoogle.maps.places.autocomplete（输入）；
//当用户从下拉列表中选择地址时，
google.maps.event.addListener（自动完成，'place_changed'，function（）{
//从自动完成对象获取位置详细信息。
var place=autocomplete.getPlace（）；
log（“place:+JSON.stringify（place））；
}); 
}; 
};

这是最终对我有效的解决方案：我添加了

mrt:googlemaps

包

然后我将googlePlaces.js设置为：

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

然后，我为将要使用autocomplete 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都是“自动完成”的，但真正重要的是，为每个模板要使用它的每个元素创建一个变量，然后将该模板的

呈现的

设置为等于该变量

问题/解决方案：

---

除了我必须将传感器设置为true之外，此代码基本上都能正常工作。而且，每个模板只工作一次。如果我在另一个模板上有places autocomplete，它将无法工作，除非我在第一个模板中使用过一次后刷新它。有什么建议吗？我确实这样做了，但得到了一个类型错误：a未定义-在加载的google maps/places脚本中，由于它与加载的库有关，所以很难调试。有什么想法吗？最近在github上的工作示例？感谢您的评论。我会调查这些。上面的代码在我的项目中仍然适用。奇怪。希望我们能弄清这件事的真相@Ajar-您是否正在使用任何其他window.onload事件？甚至jquery？我相信window.onload只能定义一次？尝试使用jquery的：$（window）.on（“load”，function（）{//将代码放在这里！}）；

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

   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;