将可点击结果添加到Google地图自动填充

时间:2016-05-31 16:30:34

标签: javascript jquery google-maps-api-3 google-places-api

我正在尝试将自定义结果添加到自动完成功能并且运气不错,但我无法使结果可以点击。左键或右键单击绝对没有任何效果。请考虑以下代码:



<input type="text" name="query" id="query">
<script>
    var input = (document.getElementById('query'));
    var options = [];

    city = new google.maps.places.Autocomplete(input, options);

    google.maps.event.addListener(city, 'place_changed', function () {

        place = city.getPlace();


    });

    $("#query").on('input', function()
    {
        append_places($("#query").val());
    });

    var new_pac = false;
    function append_places(input)
    {
        if (!new_pac)
        {
            setTimeout(function()
            {
                $(".pac-container").append('<div id="new-pac""></div>');
            }, 1);

            new_pac = true;
        }
        else
        {
            $('#new-pac').empty();
        }

        $("#new-pac").append('<div class="pac-item areasearch"><a href="http://www.wherever.com">Foo</a><span class="pac-icon pac-icon-areas"></span><a class="pac-item-query" href="http://www.wherever.com">test</a></div>');

    }

</script>
&#13;
&#13;
&#13;

新条目显示,看起来像一个链接,但点击时不会做出反应。关于如何实现这一目标的任何想法?

1 个答案:

答案 0 :(得分:0)

查看Google Maps JS Demo,您似乎缺少一种方法来定义地图上的首选视口以查看该地点。您需要添加代码,以便它能够执行某些操作,或者无法检索某个位置。

// If the place has a geometry, then present it on a map.
if (place.geometry.viewport) {
map.fitBounds(place.geometry.viewport);
}

此处another example供参考。