Question

如果你不熟悉谷歌的地理自动完成插件让我解释一下我的工作原理，我有一个文本框，当你在文本框中输入一个位置时，auto-complete插件会给你一个下拉列表名字相似的地方。选择所需的地点后，将为您生成地图。

我想要的是将返回位置的完整地址放入文本框中。在一些研究中，我在网上进行了搜索：

getPlace()

功能和我想要的属性：

formatted_address

但我的问题是这是我第一次使用谷歌的'地理自动完成'插件，所以我不知道如何正确使用这些功能。如果您曾经实施类似的东西，请帮助我。

这是我的代码：

<!-- Google Maps API -->
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
    <!-- 
        jquery.autocomplete.js requires a minor modification for geo_autocomplete to work
        the following script includes the required mod
    -->
    <script type="text/javascript" src="geo-autocomplete/lib/jquery.autocomplete_geomod.js"></script>
    <script type="text/javascript" src="geo-autocomplete/geo_autocomplete.js"></script>
    <link rel="stylesheet" type="text/css" href="geo-autocomplete/lib/jquery.autocomplete.css" />
    <!-- Google Maps API -->
<script type=text/javascript"> 
        $(document).ready(function () {
            $('#dialog-form').hide();

            $('#btnCancel').css('cursor', 'pointer');
            $('#btnPostAlert').css('cursor', 'pointer');


            $('#btnCancel').click(function () {
                $('#dialog-form').hide();
                alert(place.name)
            });

            $('#btnPostAlert').click(function () {
                $('#dialog-form').show();
            });
            var latlng = new google.maps.LatLng(-34.397, 150.644);

            var myOptions = {
                zoom: 8,
                center: latlng,
                mapTypeId: google.maps.MapTypeId.ROADMAP

            };
            var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);

            $("#location").geo_autocomplete(new google.maps.Geocoder, {
                mapkey: 'ABQIAAAAbnvDoAoYOSW2iqoXiGTpYBTIx7cuHpcaq3fYV4NM0BaZl8OxDxS9pQpgJkMv0RxjVl6cDGhDNERjaQ',
                selectFirst: false,
                minChars: 3,
                cacheLength: 50,
                width: 300,
                scroll: true,
                scrollHeight: 330,
                details: $('#details'),

            }).result(function (_event, _data) {
                if (_data) map.fitBounds(_data.geometry.viewport);

            )};

        });


                });
</script>

Can you please check it out.

Answer 1

我不确定“geo-autocomplete插件”是什么意思，但是当你的意思是places-autocomplete时，你必须观察place_changed - 实例的autocomplete事件（当用户从下拉列表中选择一个地点时触发。

在回调中，您可以使用placesResult访问this.getPlace()，formatted_address是placeRsult的属性（如果可用），因此您可以使用this.getPlace().formatted_address来检索它google.maps.event.addListener(autocomplete, 'place_changed', function() { var address = this.getPlace().formatted_address||''; alert(address); });

采样代码：

{{1}}

从geo-autocomplete api获取返回位置的完整地址

1 个答案: