问题 在Meteor上使用Google地方自动填充功能
所以我想添加搜索栏 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但没有任何反应。我得到了谷歌未定义的错误。什么地方出了错？
1843
2017-08-18 21:34
起源
答案:
我一直在处理同样的问题，只是遇到了一个解决方案。这就是我做的。
首先，添加以下内容 包 与您的项目：
`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密钥！此代码将启动对google api的调用，并将places脚本下载到客户端。
现在，回答有关如何使自动完成工作的问题。除了一件事，你的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，但它看起来与我的非常相似。
6
2017-09-02 17:35
答案:
我一直在处理同样的问题，只是遇到了一个解决方案。这就是我做的。
首先，添加以下内容 包 与您的项目：
`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密钥！此代码将启动对google api的调用，并将places脚本下载到客户端。
现在，回答有关如何使自动完成工作的问题。除了一件事，你的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，但它看起来与我的非常相似。
6
2017-09-02 17:35
以为我会分享最终对我有用的东西
包保持不变，但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) );
});
};
};
6
2017-11-17 18:45
这是最终为我工作的解决方案：我添加了 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都是“自动完成”，但真正重要的是你为每个模板使用它的每个元素创建一个变量，然后设置该模板的 rendered 等于那个变量。
问题/解决方案：
Meteor Google地图自动填充功能仅适用于多个模板
1
2017-11-23 17:41