如何避免最终用户需要手动启动Google地方信息自动填充下拉菜单? [英] How to avoid need for end-user to manually start the Google Places Autocomplete dropdown?
问题描述
我正在尝试让Google地方信息自动处理预定义的数据,但到目前为止还算不上运气。
I'm trying to get google places autocomplete working with predefined data but so far no luck.
让我说这段文字阿拉斯加南路,西雅图, WA在这样的预定义输入字段中:
Lets say I have this text "Alaskan Way South, Seattle, WA" in an input field predefined like this:
<input id="ev-loc-input" size="60" value="Alaskan Way South, Seattle, WA" />
我为此初始化了Google自动填充功能,并且希望以某种方式触发它,因此它会正确地查找该地址当页面加载时。
I initialize googles autocomplete on it and I would like to somehow trigger it so it looks for this address right when the page loads.
似乎只有一个记录在案的事件 place_changed:
There seem to be only one documented event for it "place_changed":
google.maps.event.addListener(events_autocomplete, 'place_changed', function(){..
我无法使用该地址,因为它已经在地址查找完成后触发。我找不到可用的事件列表-也许有人知道吗?
I cant use this one cause it gets triggered after the address lookup is already done. I couldn't find a list of events available - maybe anyone knows?
任何帮助,我们将不胜感激!
Any help much appreciated!
推荐答案
我终于弄清楚了!我已经为此工作了2个小时!
I finally figured this out! I've been working on this for 2 hours!
无论如何,您需要专注于输入元素,但不能立即执行,您需要延迟它。
Anyway, you need to focus on your input element, but you can't do it right away. You need to delay it.
所以,像这样...
setTimeout(func, 2000);
function func() {
input.focus();
selectFirstResult();
}
这是我的代码,它可以正常工作。
Here is the my code, and it works.
$(function() {
var input = document.getElementById('searchTextField');
input.value = "{{ $user["location"] }}";//I'm using laravel
//You won't need the above line if you're already filling in the value of
//the input field - I'm going to get this working without the map as well
//I'll come back and post that later this weekend
var lat = -33.8688,
lng = 151.2195,
latlng = new google.maps.LatLng(lat, lng),
image = 'http://www.google.com/intl/en_us/mapfiles/ms/micons/blue-dot.png';
var mapOptions = {
center: new google.maps.LatLng(lat, lng),
zoom: 13,
mapTypeId: google.maps.MapTypeId.ROADMAP
},
map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions),
marker = new google.maps.Marker({
position: latlng,
map: map,
icon: image
});
var autocomplete = new google.maps.places.Autocomplete(input, {
types: ["geocode"]
});
autocomplete.bindTo('bounds', map);
var infowindow = new google.maps.InfoWindow();
google.maps.event.addListener(autocomplete, 'place_changed', function() {
infowindow.close();
var place = autocomplete.getPlace();
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
} else {
map.setCenter(place.geometry.location);
map.setZoom(17);
}
moveMarker(place.name, place.geometry.location);
});
$("input").focusin(function () {
$(document).keypress(function (e) {
if (e.which == 13) {
selectFirstResult();
}
});
});
$("input").focusout(function () {
if(!$(".pac-container").is(":focus") && !$(".pac-container").is(":visible"))
selectFirstResult();
});
function selectFirstResult() {
infowindow.close();
$(".pac-container").hide();
var firstResult = $(".pac-container .pac-item:first").text();
var geocoder = new google.maps.Geocoder();
geocoder.geocode({"address":firstResult }, function(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var lat = results[0].geometry.location.lat(),
lng = results[0].geometry.location.lng(),
placeName = results[0].address_components[0].long_name,
latlng = new google.maps.LatLng(lat, lng);
moveMarker(placeName, latlng);
$("input").val(firstResult);
}
});
}
function moveMarker(placeName, latlng){
marker.setIcon(image);
marker.setPosition(latlng);
infowindow.setContent(placeName);
infowindow.open(map, marker);
}
setTimeout(func, 2000);
function func() {
input.focus();
selectFirstResult();
}
});
这篇关于如何避免最终用户需要手动启动Google地方信息自动填充下拉菜单?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!