如何在我的网站（如谷歌地图）上自动完成/建议地点（带地址）？答案

【问题标题】：How to auto-complete/suggest places (with address) on my website like on Google maps?如何在我的网站（如谷歌地图）上自动完成/建议地点（带地址）？
【发布时间】：2011-05-09 08:51:52
【问题描述】：

我正在开展一个类似 Yelp 的项目，该项目将评论与地点相关联。然而，我们没有任何地点数据库，我们想利用第三方 API。我们希望从 Google 地图上的自动完成搜索框开始。例如，用户输入“tamar”并建议“Tamarine Restaurant, Palo Alto, CA, United States”。 1）有可能吗？你会使用什么第三方api？谷歌地图是最好的吗？

返回结果后，用户选择一个地方并留下评论。 2）您如何将该评论与数据库中的特定位置相关联？我担心的是，如果以后我们更改 api 提供者，我们仍然可以将我们的评论与新的 api 位置相关联。

非常感谢！任何建议都会有所帮助。棒棒哒

【问题讨论】：

标签： api google-maps autocomplete maps

【解决方案1】：

如果需要，这将生成自动完成功能，还可以在 2 个文本框中获取纬度和经度，以便存储在您的数据库中。最初的中心是静态设置的 ..希望这是您想要的

<head>
 <script type="text/javascript" src=" https://ajax.microsoft.com/ajax/jquery/jquery-1.4.2.min.js"></script>
  <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=places&sensor=false"></script>
  <script type="text/javascript">
  var map;
  var geocoder;
  geocoder = new google.maps.Geocoder();

  function initialize() {
var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316);
    map = new google.maps.Map(document.getElementById('map'), {
  mapTypeId: google.maps.MapTypeId.ROADMAP,
  center: pyrmont,
   zoom: 15
  });

  var input = document.getElementById('searchTextField');
  var options = {
  bounds: pyrmont,
 //types: ['establishment']  dont mention it we need to get both bussiness andaddress
  };
  autocomplete = new google.maps.places.Autocomplete(input, options);
  }

  $(document).ready(function() {
  $("#find").click(function(){

   var address = document.getElementById("searchTextField").value;
   geocoder.geocode( { 'address': address}, function(results, status) {
  if (status == google.maps.GeocoderStatus.OK) {
    map.setCenter(results[0].geometry.location);
    var test = results[0].geometry.location;
    var latlang=String(test);
    latlang = latlang.substring(0, latlang.length-1);
    latlang= latlang.substr(1);
    var latlan = latlang.split(",");
    var lat = latlan[0];
    var lon = latlan[1];
    $("#latitude").val(lat);
            $("#longitude").val(lon);
      var marker = new google.maps.Marker({
           map: map,
            position: results[0].geometry.location
        });
      } else {
       alert("Geocode was not successful for the following reason: " + status);
     }
   }); 
 });
});

</script>

  <body onload="initialize();">
 <label> Type address</label>
<input type="text" id="searchTextField" style="width:500px;" />
<div id="map" style="width:500px;height:500px;"></div>
<input type="text" id="latitude"/>
<input type="text" id="longitude"/>
<input type="button" id="find"  value="Find"/>
 </body>

【讨论】：

【解决方案2】：

http://compass.webservius.com 有一个 API 可以提供帮助。您可以搜索美国数百万企业的数据库（例如，通过示例中的名称前缀、邮政编码、纬度/经度边界框等）并返回结果（例如企业名称、地址、类型、等）以 XML 或 JSON 格式。

对于您问题的第二部分，这很困难，因为企业没有“通用 ID”，但通常标准化的邮政地址 + 企业名称的组合就足够了。

【讨论】：

【解决方案3】：

html

<script src="https://maps.googleapis.com/maps/api/js?libraries=places"></script>

HTML 表单输入

<input id="locationName" name="locationName" type="text">

JavaScript

 function init() {
        var input = document.getElementById('locationName');
        var autocomplete = new google.maps.places.Autocomplete(input);
    }
    google.maps.event.addDomListener(window, 'load', init);

【讨论】：