使用 GoogleMap API 的 Ajax 请求答案

【问题标题】：Ajax Request using GoogleMap API使用 GoogleMap API 的 Ajax 请求
【发布时间】：2011-05-07 03:18:26
【问题描述】：

我正在尝试创建一个实时搜索框，以便我的用户可以在我的网站上搜索位置。我一直在使用 JqueryUI 自动完成功能和 GoogleMap API 作为建议列表。

代码如下：

...
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.12.custom.min.js"></script>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>

<body>
<div id="content">
    <h1>Google Maps Autocomplete Search Sample</h1>
    <div align="left">
        <form method="post" action="#">
            <input type="text" value="" id="searchbox" name="searchbox" style=" width:800px;height:30px; font-size:15px;">
            <input type="submit" />
            <div class="ui-widget" style="margin-top:2em; font-family:Arial">
                Result:
                <div id="log" style="height: 200px; width: 300px; overflow: auto;" class="ui-widget-content"></div>
            </div>
        </form>
    </div>
    <div align="left" id="map" style="width:800px; height: 600px; margin-top: 10px; ">  
    </div>
</div>
<?php
include_once('inc/foot.php');
?>
<script type="text/javascript">
 $(document).ready(function(){

  var mapOptions = {
       zoom: 10,
       mapTypeId: google.maps.MapTypeId.ROADMAP,
       center: new google.maps.LatLng(41.06000,28.98700)
     };



  var map = new google.maps.Map(document.getElementById("map"),mapOptions);

  var geocoder = new google.maps.Geocoder();  

     $(function() {

         function log( message ) {
            $( "<div/>" ).text( message ).prependTo( "#log" );
            $( "#log" ).attr( "scrollTop", 0 );
        }

         $("#searchbox").autocomplete({

           source: function(request, response) {

          if (geocoder == null){
           geocoder = new google.maps.Geocoder();
          }
             geocoder.geocode( {'address': request.term }, function(results, status) {
               if (status == google.maps.GeocoderStatus.OK) {

                  var searchLoc = results[0].geometry.location;
               var lat = results[0].geometry.location.lat();
                  var lng = results[0].geometry.location.lng();
                  var latlng = new google.maps.LatLng(lat, lng);
                  var bounds = results[0].geometry.bounds;

                  geocoder.geocode({'latLng': latlng}, function(results1, status1) {
                      if (status1 == google.maps.GeocoderStatus.OK) {
                        if (results1[1]) {
                         response($.map(results1, function(loc) {
                        return {
                            label  : loc.formatted_address,
                            value  : loc.formatted_address+loc.geometry.location,
                            bounds   : loc.geometry.bounds
                          }
                        }));
                        }
                      }
                    });
            }
              });
           },
            select: function(event,ui){
                var pos = ui.item.position;
                var lct = ui.item.locType;
                var bounds = ui.item.bounds;
                log( ui.item ?
                    ui.item.value :
                    "undefined_by_google" + this.value );

      if (bounds){
       map.fitBounds(bounds);
      }
           }
         });
     });   
 });
</script>

我想找到一种方法，仅使用坐标加载 div (#log)，同时搜索输入 (#searchbox) 继续显示文本值。

我希望它足够清楚，否则就问我...... 感谢您的帮助

编辑

问题解决了，很简单，只是需要：

$("#log").html("纬度：" + lat + "经度：" + lng);

感谢您查看埃德加

【问题讨论】：

您当前的代码运行正常吗？缺少什么？
是的，代码运行完美，我只想将坐标（由搜索返回）隔离在一个单独的 div 中，我想这是一个简单的请求，但我对 javascript 的了解非常有限。 ..

标签： jquery search google-maps autocomplete coordinates

【解决方案1】：

您只需添加一行代码，然后进行一项更改：

这会将您的最后一个位置保存在一个字符串中：

              lastLoc='('+lat+','+lng+')';

这会将其打印到日志中：

log( ui.item ? lastLoc : "undefined_by_google" + this.value );

查看小提琴以了解这些行的去向： working example

【讨论】：