jQuery 自动完成与谷歌地图地址查找

jQuery autocomplete with google map address lookup

本文关键字:谷歌地图 地址 查找 jQuery      更新时间:2023-09-26

如何在 jsfiddle 中重现这个插件?到目前为止的代码在这里。我的问题是 - 我可以看到使用 firebug 的每个请求都有响应数据,但自动完成列表没有显示。谢谢你们的时间。

直接从小提琴添加代码 -.HTML:

<!-- required js libraries -->
<script type="text/javascript" src="jquery-1.7.1.min.js"></script> <!-- jQuery is directly loaded from fiddle, so in the live example I skipped this line -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" src="http://gmap3.net/js/gmap3-4.1-min.js"></script>
<script type="text/javascript" src="https://raw.github.com/jbdemonte/autocomplete/master/jquery-autocomplete.min.js"></script>
<!-- this is required to help autocomplete plugin -->
<link rel="stylesheet" type="text/css" href="https://raw.github.com/jbdemonte/autocomplete/master/jquery-autocomplete.css" />
<input type="text" id="address" size="60"/>
<div id="test" style="height:350px; width:600px"></div>​

这是 javascript:

/*This one initializes the map*/
$("#test").gmap3();
/*This is the autocomplete code*/
$('#address').autocomplete({
  source: function() {
    $("#test").gmap3({
      action:'getAddress',
      address: $(this).val(),
      callback:function(results){
        if (!results) return;
        $('#address').autocomplete(
          'display', 
          results,
          false
        );
      }
    });
  },
  cb:{
    cast: function(item){
      return item.formatted_address;
    },
    select: function(item) {
      $("#test").gmap3(
        {action:'clear', name:'marker'},
        {action:'addMarker',
          latLng:item.geometry.location,
          map:{center:true}
        }
      );
    }
  }
});​
可以通过将

输入包装在容器中并在该容器和映射之间添加一些边距来使您的版本正常工作。我不认为 css 是从 github 资源正确交付的,因为我还必须添加一些额外的 z 索引才能让结果列表显示在地图顶部

工作演示:http://jsfiddle.net/VBFxp/3/