Google Maps API - 悬停时自动提示

Question

我想在我的网络地图中创建搜索输入查找位置的功能，而不是在自动建议点击上，而是在自动建议的位置上。 解释： -user 在输入中指向 Us -autosuggest 列出其下的地点，如 city1、city2 等

正常：用户点击地点，地图重新加载到该地点，

我想要什么：用户将鼠标悬停在某个地方，地图重新加载到那个地方

这可能吗？

我已经将悬停附加到元素上，但仅此而已......

$('body').on( 'hover', '.pac-container .pac-item', function(){
    console.log($(this));
    console.log($(this).data());
});

Answer 1

自动完成没有鼠标悬停事件。应该有可能找到一个现在可以工作的解决方案，但这并不可靠，因为它会假设一个你不能依赖的行为（它可能会随着下一个 API 版本而改变）

一个干净的解决方案是请求Autocomplete-Service 并根据您自己的响应实施自动完成。

您似乎使用 jQuery，因此可以选择使用 jQueryUI-Autocomplete。

一个 jQuery 插件，它使用来自场所自动完成服务（包括悬停行为）的结果填充 jQueryUI 自动完成：

(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));

用法：

$('#inputselector').googlePlacesAutocomplete(mapInstance);

演示： http://jsfiddle.net/doktormolle/t7ppt8cj/