谷歌地图地理编码 - 自动建议点击地理编码答案

【问题标题】：Google Map Geocoding - Geocode on autosuggest click谷歌地图地理编码 - 自动建议点击地理编码
【发布时间】：2013-05-07 10:21:09
【问题描述】：

我正在尝试优化我的地理编码脚本而不是它实际工作，我想知道当用户从下拉列表中选择自动建议时是否可以实际启动地理编码。

这样，当用户单击搜索按钮时，地理编码将完成，他们不必等待。当用户点击自动推荐的位置时，是否可以使用某种事件来触发地理编码？

这是代码

http://jsfiddle.net/sR4GR/22/

原始 Javascript

        <script type="text/javascript" src="//maps.google.com/maps/api/js?sensor=true&libraries=places"></script>
<script type="text/javascript">
    // SET COOKIE FOR TESTING   
    $.cookie("country", "UK");

    // GEOCODE RESULT
    function geocode() {

        var GeoCoded = {
            done: false
        };
        var input = document.getElementById('loc');
        var options = {
            types: ['geocode']
        };
        var country_code = $.cookie('country');
        if (country_code) {
            options.componentRestrictions = {
                'country': country_code
            };
        }
        var autocomplete = new google.maps.places.Autocomplete(input, options);
        $('#searchform').on('submit', function(e) {
            if (GeoCoded.done) return true;
            e.preventDefault();
            var geocoder = new google.maps.Geocoder();
            var address = document.getElementById('loc').value;
            $('#searchform input[type="submit"]').attr('disabled', true);
            geocoder.geocode({
                'address': address
            },

            function(results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    $('#lat').val(results[0].geometry.location.lat());
                    $('#lng').val(results[0].geometry.location.lng());
                    GeoCoded.done = true;
                    $.cookie("location_input", $("#loc").val());
                    $.cookie("lng", $("#lng").val());
                    $.cookie("lat", $("#lat").val());
                    $('#searchform').submit();
                } else {
                    $('#searchform input[type="submit"]').attr('disabled', false);
                    alert("We couldn't find this location")
                }

            });

        });

    };  
</script>


<body onload="geocode()">
    <form id="searchform">
        <input class="kw" id="keyword" placeholder="Keyword"></input>
        <input id="loc" placeholder="Location" type="text"></input>
        <input type="submit" value="Search" id="search">
        <input class="hidden" id="lat" disabled="true" placeholder="lat"></input>
        <input class="hidden" id="lng" disabled="true" placeholder="lng"></input>
    </form>

【问题讨论】：

标签： javascript jquery google-maps google-maps-api-3 geocoding

【解决方案1】：

我建议您使用 jQuery Autocomplete 小部件并从 Google 获取数据作为 jQuery Autocomplete 的源数据

【讨论】：

感谢您的回复，但这无法根据国家/地区进行过滤，这真的很遗憾，但它让我无法使用它

【解决方案2】：

您可以将事件处理程序绑定到自动完成的“place_changed”事件

google.maps.event.addListener(autocomplete, 'place_changed', function() {
   //initiate the geocode
});

你可以阅读它here

【讨论】：

这看起来正是我所追求的，但我无法让它工作。对于我的例子，它不应该像这样简单吗？ google.maps.event.addListener(autocomplete, 'place_changed', function() { geocode() });
不，您在地理编码函数中定义自动完成功能，您不能在定义之前将事件处理程序绑定到它，我认为您应该在创建自动完成后立即放置此事件处理程序并使用您应用的相同功能在提交搜索表单时
我认为你的指示是正确的，但我无法让它工作，我是 javascript 的新手，看起来这东西有点超出我的能力。这是我尝试过的：jsfiddle.net/sR4GR/23
正如我所说，您应该使用与表单提交相同的代码。我更新了你的 jsfiddle - 我将它分离到 processLocation 函数中，并将它用于“place_changed”和表单 sumbit
再次更新了您的jsfiddle，最好将javascript代码保留在javascript部分中（它将在窗口加载时执行），并将附加资源添加为“外部资源”