我在点击和输入更改事件时动态添加了一个文本输入,我需要获取 google api getPlace() 值。
按回车键时效果很好,但是当我从鼠标中选择mouseclick
时,place_changed
事件给出了未定义的位置
<强> JS FIDDLE DEMO
<div id="clkDIv">CLICK ME</div>
<br>
<div id="contentDiv"></div>
<小时/>
var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631));
$("#clkDIv").on('click', function () {
var txtEl = "<input id='txtDynamic' type='text' />";
$("#contentDiv").append(txtEl);
});
$("#contentDiv").on('input', '#txtDynamic', function () {
$myInput = $(this);
var options = {
bounds: defaultBounds,
types: ['geocode']
};
autocomplete = new google.maps.places.Autocomplete($myInput.get(0), options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place);
});
});
最佳答案
自动完成place_changed
事件监听器已经负责监听Enter
按键和点击,所以你可以用其他方式来做周围。
- 动态添加您的输入
- 将自动完成功能绑定(bind)到您的输入(添加后)
这是代码:
$(document).ready(function () {
$("#clkDIv").on('click', function () {
var txtEl = "<input id='txtDynamic' type='text' />";
$("#contentDiv").append(txtEl);
bindAutocomplete();
});
});
function bindAutocomplete() {
var defaultBounds = new google.maps.LatLngBounds(new google.maps.LatLng(-33.8902, 151.1759), new google.maps.LatLng(-33.8474, 151.2631));
var options = {
bounds: defaultBounds,
types: ['geocode']
};
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('txtDynamic'), options);
google.maps.event.addListener(autocomplete, 'place_changed', function () {
var place = autocomplete.getPlace();
console.log(place);
});
}
这是更新的 fiddle :
关于javascript - getPlace() 为动态添加的文本输入给出 Undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26904189/