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

Question

所以我正在尝试将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 但没有任何反应。我得到一个谷歌未定义的错误。出了什么问题？

Answer 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

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

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

首先，将以下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，但它看起来和我的很相似。