如何像在谷歌地图上一样自动完成/建议在我的网站上的位置（带有地址）？

Question

I am working a Yelp-like project that associates reviews to places. 我正在做一个类似Yelp的项目，将评论与地点相关联。 Yet, we don't have any database of places and we'd like to leverage a third-party api. 但是，我们没有任何地点数据库，我们想利用第三方api。 We'd like to start with a auto-complete search box like on Google Maps. 我们想从一个自动完成的搜索框开始，例如在Google地图上。 For example, the user enters "tamar" and it suggests "Tamarine Restaurant, Palo Alto, CA, United States". 例如，用户输入“ tamar”，并建议“美国加利福尼亚州帕洛阿尔托的塔玛琳餐厅”。 1) is it possible? 1）有可能吗？ what third party api would you use? 您将使用哪种第三方api？ Is Google maps the best? Google地图是最好的吗？

Once the results are returned, the user selects one place and will leave a review. 返回结果后，用户将选择一个位置并留下评论。 2) how would you associate that review to that specific place in the DB? 2）您如何将该评论与数据库中的特定位置相关联？ My concern is if later on we change api provider, that we can still associate our reviews to the new api places. 我担心的是，如果以后我们更改api提供程序，我们仍然可以将我们的评论关联到新的api位置。

Thank you SO MUCH! 非常感谢！ Any suggestion would help. 任何建议都会有所帮助。 Fab 晶圆厂

Answer 1

this will generate autocomplete also get the latitutde and longitutde in 2 textbox for storage on your DB if need.initially center is set statically ..hope this is what you want 这将生成自动完成功能，还可以在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>

Answer 2

There's an API at http://compass.webservius.com that can help. http://compass.webservius.com上有一个可以提供帮助的API。 You can search a database of millions of businesses in the US (eg by a name prefix like in your example, by zip code, by latitude/longitude bounding box, etc) and get back results (such as business name, address, type, etc) in XML or JSON format. 您可以搜索美国数百万家企业的数据库（例如，通过示例中的名称前缀，邮政编码，纬度/经度边界框等），并返回结果（例如企业名称，地址，类型， XML或JSON格式）。

For the second part of your question, it is tough because there is no "universal ID" for a business, but usually a combination of normalized postal address + business name will work well enough. 对于问题的第二部分，这很困难，因为企业没有“通用ID”，但是通常将规范化的邮政地址+商户名称组合在一起就足够了。

Answer 3

html html

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

HTML Form Input HTML表单输入

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

JavaScript 的JavaScript

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

如何像在谷歌地图上一样自动完成/建议在我的网站上的位置（带有地址）？

问题描述

3 个解决方案

解决方案1
1 2012-01-02 12:44:02

解决方案2
0 2010-11-17 08:18:32

解决方案3
0 2018-06-14 13:43:06

如何像在谷歌地图上一样自动完成/建议在我的网站上的位置（带有地址）？

问题描述

3 个解决方案

解决方案1 1 2012-01-02 12:44:02

解决方案2 0 2010-11-17 08:18:32

解决方案3 0 2018-06-14 13:43:06

解决方案1
1 2012-01-02 12:44:02

解决方案2
0 2010-11-17 08:18:32

解决方案3
0 2018-06-14 13:43:06