自动填充地址+ Google Maps API

我想向我的用户显示一个可输入地址的文本框。当他们输入他们的地址时，我想向用户提供他们尝试输入的地址的建议/预测。我也关心这个地址的相关性（例如地址不是全世界的地址）。自动填充地址+ Google Maps API

这可能吗？我正在使用jQuery。

来源

2010-10-30 StackOverflowNewbie

这不是可能jQuery的问题。您需要输入一些第三方供应商，他们在运行时为您提供地址，例如QAS服务。 – kobe 2010-10-30 23:42:43

我不知道是否有免费提供商，我们在我们公司实施并使用QAS。 – kobe 2010-10-30 23:43:26

http://www.qas.com/home.htm，检查这是否是你想要实现的。 – kobe 2010-10-30 23:48:54

您可以使用Google Places API为地址提供自动填充功能。当选择地址时，address_components字段包含结构化地址数据（例如街道，城市，国家），并且可以很容易地转换为单独的字段。

这里是一个简短的工作演示：

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    </head> 
    <body> 
     <input type="text" id="address" style="width: 500px;"></input> 

     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
     <script> 
      var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 

      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
       var place = autocomplete.getPlace(); 
       console.log(place.address_components); 
      }); 
     </script> 
    </body> 
</html>

来源

2011-07-28 07:35:19

有没有办法让它自动填充不同的输入？因此，如果您从输入第一行开始，并为您提供地址选项，那么当您点击它时，它会自动填充多个输入的地址？ – 2014-04-02 11:20:11

我如何在地图上显示选定的位置，请帮助我 – Erum 2014-05-09 12:42:36

哇，这非常简单直接，谢谢你！ – Brian 2017-05-18 03:23:39

看看address-suggestion和the demo。它使用jQuery和Google Maps地理编码API实施。

来源

2011-11-28 03:49:31 user471245

https://github.com/ubilabs/geocomplete应该为你工作。如有必要，您还可以显示地图。

如果您在不显示地图的情况下使用插件，则必须在文本字段下显示“由Google支持”徽标。

来源

2012-11-21 17:35:20 DreifGenov

@Maksym Kozlenko答案的运行版对于那些想要看到这一点的人。

<!DOCTYPE html> 
 
<html> 
 
    <head> 
 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <input type="text" id="address" style="width: 500px;"></input> 
 

 
     <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-AU"></script> 
 
     <script> 
 
      var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 
 

 
      google.maps.event.addListener(autocomplete, 'place_changed', function() { 
 
       var place = autocomplete.getPlace(); 
 
       console.log(place.address_components); 
 
      }); 
 
     </script> 
 
    </body> 
 
</html>

来源

2016-01-02 09:52:49

你必须使用一个API密钥。

见参考here.

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
    </head> 

    <body> 
     <input type="text" id="address" style="width: 500px;"></input> 

     <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBIWSqJ5-3D-UviE0ZLO4U6AjhVcn58y4g&libraries=places&callback=initMap"></script> 
     <script> 
      function initMap(){ 
       var autocomplete = new google.maps.places.Autocomplete($("#address")[0], {}); 

       google.maps.event.addListener(autocomplete, 'place_changed', function() { 
        var place = autocomplete.getPlace(); 
        console.log(place.address_components); 
       }); 
      } 
     </script> 
    </body> 
</html>

来源

2016-07-13 09:09:44

自动填充地址+ Google Maps API

回答

相关问题