将地点自动完成结果限制在 COUNTRY 和 STATE 范围内

Restrict places autocomplete results to within COUNTRY and STATE

我目前正在使用此 URL 将我的结果限制在澳大利亚境内:

https://maps.googleapis.com/maps/api/place/autocomplete/json?input=393&components=country:AUtypes=address&key=[my_api_key]

但我想说的是,将我的搜索限制在当前州,比方说新南威尔士州。

我试过这个: https://maps.googleapis.com/maps/api/place/autocomplete/json?input=393&components=country:AU&state=NSW&types=address&key=[my_api_key]

但它返回的结果与来自维多利亚而非新南威尔士州的商品数量相同。

根据文档:

https://developers.google.com/places/web-service/autocomplete

虽然不表示限制状态

我的解决方案是通过比较州和国家/地区以及从 Places API 返回的描述来过滤传入的结果。示例实施如下:

        JSONObject jsonObj = new JSONObject(jsonResults.toString());
        JSONArray predsJsonArray = jsonObj.getJSONArray("predictions");
        // Extract the Place descriptions from the results
        resultList = new ArrayList<>(predsJsonArray.length());
        for (int i = 0; i < predsJsonArray.length(); i++) {
            if(predsJsonArray.getJSONObject(i) != null){
                String description = predsJsonArray.getJSONObject(i).getString("description");
                if(description != null){
                    if(description.contains(state + ", " + country))
                    resultList.add(new Place(description,
                            predsJsonArray.getJSONObject(i).getString("place_id")));
                }
            }
        }

嘿朋友!

我遇到了同样的问题,最终在 javascript 中构建了一个解决方案,能够限制任何你想要的地址。

问题

真正的事情是 Google API 自动完成方法没有给我们一个完整的限制地址选项,只为所需的国家和边界(如果你有坐标)。

并且用户每次需要获得正确地址时都键入所有完整地址(社区、城市、州等)仍然有点棘手,至少在我的使用情况下(消防员紧急呼叫出勤) ).

解决方案

它不是 100% 不会 return 不良结果,但它会节省用户大量的输入工作。

基本上这个脚本通过在请求到达 google 服务器之前在幕后添加必要的限制来欺骗 Google APIs 和用户。

它使用 service.getPlacePredictions 和 google.maps.places.AutocompleteService 并以 "Autocomplete without Places Details - Per Session" 的计费方式实施,这意味着自用户开始输入后您只需支付一次费用,直到他点击地址预测(可用的更便宜的选项)。

使用自定义自动完成而不是 google 默认小部件的另一个优点是,如果 API 键出现问题(例如超出限制),它不会阻止文本输入.因此用户可以键入地址,将来系统 adms 可以对未验证的地址进行正确处理。

需要在您的 console.cloud.google.com 上激活地点 API 和地图 JavaScript API。

好吧,下面是您使用该组件所需要做的所有事情。

<html>
   <head>
      <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
      <meta content="utf-8" http-equiv="encoding">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <p>This example uses service.getPlacePredictions and google.maps.places.AutocompleteService what means that the billing stands for "Autocomplete without Places Details - Per Session"</p>
      <!--Make sure the form has the autocomplete function switched off:-->
      <form autocomplete="off" action="/action_page.php">
         <div class="autocomplete" style="width:300px;">
            <p><input id="estado" type="text" name="estado" placeholder="Estado" value="SC"></p>
            <p><input id="cidade" type="text" name="cidade" placeholder="Cidade"value="FLORIANOPOLIS"></p>
            <p><input id="bairro" type="text" name="bairro" placeholder="Bairro" value="CENTRO"></p>
            <p><input id="numero" type="text" name="numero" placeholder="Numero" value="10"></p>
            <input id="logradouro" type="text" name="logradouro" placeholder="Logradouro">
         </div>
         <input type="submit">
      </form>
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
      <script async defer src="https://maps.googleapis.com/maps/api/js?key=GOOGLE_API_KEY&libraries=places" type="text/javascript"></script>
      <script src="./autocomplete.js" type="text/javascript"></script>
      <script type="text/javascript">
         let autocomplete = new RestrictedAutocomplete(document.getElementById("logradouro"), function () {
            console.log(this.lastResultBusca);
            console.log(this.lastResultEnderecoCompleto);
            console.log(this.lastResultNumero);
            console.log(this.lastResultNumeroA);
            console.log(this.lastResultLogradouro);
            console.log(this.lastResultLogradouroA);
            console.log(this.lastResultBairro);
            console.log(this.lastResultBairroA);
            console.log(this.lastResultCidade);
            console.log(this.lastResultCidadeA);
            console.log(this.lastResultEstado);
            console.log(this.lastResultEstadoA);
            console.log(this.lastResultPais);
            console.log(this.lastResultPaisA);
            console.log(this.lastResultCEP);
            console.log(this.lastResultCEPA);
            console.log(this.lastResultId);
            console.log(this.lastResultLatitude);
            console.log(this.lastResultLongitude);
         });
         autocomplete.setRestrictions(document.getElementById("estado"), 
            document.getElementById("cidade"), 
            document.getElementById("bairro"), 
            document.getElementById("numero"));
      </script>
   </body>
</html>

自动完成工作:

地址选择后自动完成:

您可以在 GitHub project 上查看更多详细信息。

希望对您有所帮助!