Question

所以我试图将https://developers.google.com/maps/documentation/javascript/examples/places-autocomplete-addressform的搜索栏添加到我的Meteor应用程序中。首先，我需要加载Google商家信息库。但是，该链接还尝试直接写入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但没有任何反应。我得到了谷歌未定义的错误。出了什么问题？

Answer 1

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

首先，将以下package添加到您的项目中：

`mrt add googlemaps`

或者，如果你使用的是meteor＆gt; = 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的调用，并将places脚本下载到客户端。

现在，回答有关如何使自动完成工作的问题。你的HTML和js看起来很好，除了一件事。你需要将你的j包装在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，但它看起来与我的非常相似。

Answer 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) ); 
        }); 
    }; 
};

Answer 3

这是最终对我有用的解决方案：我添加了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为＆＃34;自动完成＆＃34;对于将要使用它的每个元素，但最重要的是你为每个模板使用它的每个元素创建一个变量，然后将该模板设置为rendered等于那个变量。

问题/解决方案： Meteor Google Maps Autocomplete only works once on multiple templates

在Meteor中使用Google地方自动填充功能

3 个答案: