Fatal编程技术网
  • api/
  • Api 如何像在谷歌地图上一样自动完成/建议我网站上的位置（带地址）？

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

api google-maps autocomplete maps

Api 如何像在谷歌地图上一样自动完成/建议我网站上的位置（带地址）？,api,google-maps,autocomplete,maps,Api,Google Maps,Autocomplete,Maps,我正在做一个类似Yelp的项目，将评论与地点关联起来。然而，我们没有任何位置数据库，我们希望利用第三方api。 我们想从一个自动完成的搜索框开始，就像谷歌地图一样。例如，用户输入“tamar”并提示“Tamarine Restaurant，Palo Alto，CA，United States”。 1） 可能吗？您会使用哪种第三方api？谷歌地图是最好的吗 返回结果后，用户选择一个位置并留下评论。 2） 您如何将该审查与DB中的特定位置相关联？我担心的是，如果以后我们改变了api提供者，我们仍然可

我正在做一个类似Yelp的项目，将评论与地点关联起来。然而，我们没有任何位置数据库，我们希望利用第三方api。 我们想从一个自动完成的搜索框开始，就像谷歌地图一样。例如，用户输入“tamar”并提示“Tamarine Restaurant，Palo Alto，CA，United States”。 1） 可能吗？您会使用哪种第三方api？谷歌地图是最好的吗

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

非常感谢你！任何建议都会有帮助。 Fab

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

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

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

关于你问题的第二部分，这很难，因为一个企业没有“通用ID”，但通常情况下，规范化的邮政地址+企业名称的组合会很好地工作。

这将生成自动完成，如果需要，还可以在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>


var映射；
var地理编码器；
geocoder=新的google.maps.geocoder（）；
函数初始化（）{
var pyrmont=new google.maps.LatLng（-33.8665433151.1956316）；
map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：皮尔蒙特，
缩放：15
});
var input=document.getElementById（'searchTextField'）；
变量选项={
边界：皮尔蒙特，
//类型：[“机构”]别提了，我们需要得到业务和地址
};
autocomplete=newgoogle.maps.places.autocomplete（输入，选项）；
}
$（文档）.ready（函数（）{
$（“#查找”）。单击（函数（）{
var address=document.getElementById（“searchTextField”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var test=结果[0]。geometry.location；
var latlang=字符串（测试）；
latlang=latlang.substring（0，latlang.length-1）；
latlang=latlang.substr（1）；
var latlan=latlang.split（“，”）；
var-lat=latlan[0]；
var-lon=latlan[1]；
$（“纬度”）.val（纬度）；
$（“#经度”）.val（lon）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
});
});



类型地址
这将生成autocomplete，如果需要，还可以在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>


var映射；
var地理编码器；
geocoder=新的google.maps.geocoder（）；
函数初始化（）{
var pyrmont=new google.maps.LatLng（-33.8665433151.1956316）；
map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
中心：皮尔蒙特，
缩放：15
});
var input=document.getElementById（'searchTextField'）；
变量选项={
边界：皮尔蒙特，
//类型：[“机构”]别提了，我们需要得到业务和地址
};
autocomplete=newgoogle.maps.places.autocomplete（输入，选项）；
}
$（文档）.ready（函数（）{
$（“#查找”）。单击（函数（）{
var address=document.getElementById（“searchTextField”）.value；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
map.setCenter（结果[0].geometry.location）；
var test=结果[0]。geometry.location；
var latlang=字符串（测试）；
latlang=latlang.substring（0，latlang.length-1）；
latlang=latlang.substr（1）；
var latlan=latlang.split（“，”）；
var-lat=latlan[0]；
var-lon=latlan[1]；
$（“纬度”）.val（纬度）；
$（“#经度”）.val（lon）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
}否则{
警报（“地理编码因以下原因未成功：“+状态”）；
}
}); 
});
});



类型地址
html

html

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

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

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