-1

如果您不熟悉谷歌的地理自动完成插件,让我解释一下我的工作原理,我有一个文本框,当您在文本框中键入位置时,自动完成插件会为您提供一个下拉列表,其中包含类似的地方名字。选择所需地点后,将为您生成地图。

我想要的是将返回位置的完整地址放入文本框中。在我在线进行的一些研究中,我发现了:

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.
4

1 回答 1

0

我不确定您所说的“地理自动完成插件”是什么意思,但是当您指的是places-autocomplete时,您必须观察 -instance 的place_changed事件autocomplete(当用户从​​下拉列表中选择一个地点时触发)。

在回调中,您可以placesResult通过 using访问this.getPlace(),formatted_address是(如果可用) 的属性placeRsult,因此您可以通过 using 检索它this.getPlace().formatted_address

示例代码:

  google.maps.event.addListener(autocomplete, 'place_changed', function() {
    var address = this.getPlace().formatted_address||'';
    alert(address);
  });
于 2013-06-18T08:27:26.067 回答