Google Maps API - 悬停时自动提示 [英] Google Maps API - autosuggest on hover
问题描述
我想在我的网络地图中使搜索输入的功能找到位置，而不是自动建议点击，但在自动提取的位置。
解释：
-user点我们在输入
-autosuggest列表下的位置，比如city1，city2等
正常：用户点击地点，地图重新加载到这个地方，
我想要的：用户悬停鼠标的地方，地图重新加载到该地点
这是可能的吗？
我已经附加在元素上了，但没有更多...
（'h'，'.pac-container .pac-item'，function（）{
console.log（$（这个））;
console.log（$（this）.data（））;
}）;
Autocomplete没有鼠标悬停事件。应该有可能找到一种现在可以工作的解决方案，但这不是可靠的，因为它会假设你不能依赖的行为（它可能会随着下一个API版本而改变）。
干净的解决方案是请求自动填充 - 服务并根据自己的响应实现自动完成。
看起来您使用的是jQuery，所以它可以作为一个选项来使用 jQueryUI-Autocomplete 。
一个jQuery插件使用places-autocomplete-service（包括悬停行为）的结果填充jQueryUI-autocomplete：
（function（$ ）{
$ .fn.googlePlacesAutocomplete = function（map）{
//测试是否已加载需要的库
if（$ .type（this.autocomple te）！=='function'）{
try {
console.log（'jQueryUI.autocomplete not available，'+
'您加载了jQueryUI吗？'）;
} catch（e）{}
return this;
}
if（$ .type（google）！=='object'
|| $ .type（google.maps）！=='object'
|| $ .type（google.maps.places）！=='object'
|| $ .type（google.maps.places.Autocomplete）！=='function'）{
try {
console.log（'google.maps.places.Autocomplete不可用，'+
'是否加载了位置库？'）;
} catch（e）{}
return this;
var ac = new google.maps.places.AutocompleteService（），
pd = new google.maps.places.PlacesService（（map）？map：$（ '< DIV />'）[0]）;
this.filter（input：text）。each（function（）{
var that = $（this），
oldApi = google.maps.version<'3.17';
//当地点详细信息可用时将执行的回调函数
detailsCallback = function（place，status，cached，item，t）{
if（status！= google.maps.places （t）t.style.textDecoration ='line-through';
return;
}
if（t）t.style.textDecoration ='none';
var data = that.data（'ac'）;
if（！cached）{
data.cache [item.id] = place;
}
if（data.map&& data.marker）{
data.marker.setOptions（{
icon：place.icon || null，
map：data .map，
position：place.geometry.location
}）;
map.setCenter（place.geometry.location）;
}
};
that.data（'ac'，
$ .extend（{}，{
map：map，
marker：（map）？new google.maps .Marker：null，
cache：{}，
options：{}
}，
that.data（'ac'）））
.autocomplete（{
source：function（request，response）{
var o = $ .extend（{}，that.data（'ac'）。options，{
input：request.term $ b （'ac'）。bounds&& amp; that.data（'ac'）。map）{
o.bounds = that.data（' ac'）。map.getBounds（）;
}
ac.getPlacePredictions（o，
function（predictions，status）{
var r = [];
if（predictions）{
for（var i = 0; i< predictions.length; ++ i）{
r.push（{
cache：true，
callback：function（a，f）{
pd.getDetails.call（pd，a，f ）
}，
label：predictions [i] .description，
value：predictions [i] .description，
id：（oldApi）？predictions [i] .reference
：预测[i] .place_id
}）;
}
}
response（r）;
}）
}，
// mouseover
focus：function（e，ui）{
var data = that.data （'ac'），
o =（oldApi）？ {
reference：ui.item.id
}：{
placeId：ui.item.id
}，
t = e.toElement;
if（data.map&& data.marker）{
data.marker.setMap（null）;
}
if（ui.item.cache& amp; data.cache [ui.item.id]）{
detailsCallback（data.cache [ui.item。 id]，
google.maps.places.PlacesServiceStatus.OK，
true，
ui.item，
t）;
return;
ui.item.callback.call（pd，
o，
函数（a，b）{
detailsCallback.call （pd，a，b，false，ui.item，t）;
}）;
}，
minLength：3
}）
// css for google-logo（需要在没有地图的情况下使用）
.autocomplete（'widget'）。 addClass（'googleLogo'）
//使用自动完成作为地图控制
if（map&& that.data（'ac'）。ctrl）{
map.controls [google.maps.ControlPosition [that.data（'ac'）。ctrl]]
.push（that [0]）;
}
}）;
返回此;
};
}（jQuery））;
用法：
$（ '＃inputselector'）googlePlacesAutocomplete（mapInstance）。
演示： http://jsfiddle.net/doktormolle/t7ppt8cj/
I want to make function in my web map that search input finds location, not on autosuggest click, but on autosgested place. Explain: -user points Us in input -autosuggest list places under it, like city1, city2, etc
normal: users clicks place, map reload to this place,
what i want: user hover mouse on place, map reloads to that place
Is this possible ?
I've attached on hover to elements but nothing more...
$('body').on( 'hover', '.pac-container .pac-item', function(){
console.log($(this));
console.log($(this).data());
});
There is no mouseover-event for an Autocomplete. It should be possible the find a solution that may work now, but this will be not reliable, because it would assume a behaviour you can't rely on(it may change with the next API-version)
A clean solution would be to request the Autocomplete-Service and implement the Autocomplete based on the response on your own.
As it seems you use jQuery, so it would be an option to use jQueryUI-Autocomplete.
A jQuery-plugin that populates a jQueryUI-autocomplete with results from the places-autocomplete-service(including the hover-behaviour):
(function ($) {
$.fn.googlePlacesAutocomplete = function (map) {
//test if required libraries have been loaded
if ($.type(this.autocomplete) !== 'function') {
try {
console.log('jQueryUI.autocomplete not available,'+
' did you load jQueryUI?');
} catch (e) {}
return this;
}
if ($.type(google) !== 'object'
|| $.type(google.maps) !== 'object'
|| $.type(google.maps.places) !== 'object'
|| $.type(google.maps.places.Autocomplete) !== 'function') {
try {
console.log('google.maps.places.Autocomplete not available,' +
'did you load the places-library?');
} catch (e) {}
return this;
}
var ac = new google.maps.places.AutocompleteService(),
pd = new google.maps.places.PlacesService((map) ? map : $('<div/>')[0]);
this.filter("input:text").each(function () {
var that = $(this),
oldApi = google.maps.version < '3.17';
//callback that will be executed when place-details are available
detailsCallback = function (place, status, cached, item, t) {
if (status != google.maps.places.PlacesServiceStatus.OK) {
if (t) t.style.textDecoration = 'line-through';
return;
}
if (t) t.style.textDecoration = 'none';
var data = that.data('ac');
if (!cached) {
data.cache[item.id] = place;
}
if (data.map && data.marker) {
data.marker.setOptions({
icon: place.icon || null,
map: data.map,
position: place.geometry.location
});
map.setCenter(place.geometry.location);
}
};
that.data('ac',
$.extend({}, {
map: map,
marker: (map) ? new google.maps.Marker : null,
cache: {},
options: {}
},
that.data('ac')))
.autocomplete({
source: function (request, response) {
var o = $.extend({}, that.data('ac').options, {
input: request.term
});
if (that.data('ac').bounds && that.data('ac').map) {
o.bounds = that.data('ac').map.getBounds();
}
ac.getPlacePredictions(o,
function (predictions, status) {
var r = [];
if (predictions) {
for (var i = 0; i < predictions.length; ++i) {
r.push({
cache: true,
callback: function (a, f) {
pd.getDetails.call(pd, a, f)
},
label: predictions[i].description,
value: predictions[i].description,
id: (oldApi) ? predictions[i].reference
: predictions[i].place_id
});
}
}
response(r);
})
},
//mouseover
focus: function (e, ui) {
var data = that.data('ac'),
o = (oldApi) ? {
reference: ui.item.id
} : {
placeId: ui.item.id
},
t = e.toElement;
if (data.map && data.marker) {
data.marker.setMap(null);
}
if (ui.item.cache && data.cache[ui.item.id]) {
detailsCallback(data.cache[ui.item.id],
google.maps.places.PlacesServiceStatus.OK,
true,
ui.item,
t);
return;
}
ui.item.callback.call(pd,
o,
function (a, b) {
detailsCallback.call(pd, a, b, false, ui.item, t);
});
},
minLength: 3
})
//css for google-logo(required when used without a map)
.autocomplete('widget').addClass('googleLogo')
//use the autocomplete as map-control
if (map && that.data('ac').ctrl) {
map.controls[google.maps.ControlPosition[that.data('ac').ctrl]]
.push(that[0]);
}
});
return this;
};
}(jQuery));
usage:
$('#inputselector').googlePlacesAutocomplete(mapInstance);
Demo: http://jsfiddle.net/doktormolle/t7ppt8cj/
这篇关于Google Maps API - 悬停时自动提示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
