6

我正在尝试为我在 uni 的最后一年项目编写一个 Web 应用程序，我需要解决的第一个问题是获取一个用于本地地址输入的自动完成文本框。我花了一些时间浏览互联网并花一些时间玩谷歌地图 V3 地点自动完成插件。

在 api 文档中有一些我不太了解的东西，我希望有人能够为我澄清，也可能为我指明正确的方向。

在文档中它说：

(regions) 类型集合指示 Place 服务返回与以下类型匹配的任何结果：

locality
sublocality
postal_code
country
administrative_area1
administrative_area2

这是我目前不明白的，我住在康沃尔（确切地说是博德明），我想让结果偏向博德明。我做了以下事情：

var input = document.getElementById('inputOne');
var defaultBounds = new google.maps.LatLngBounds(
  new google.maps.LatLng(50.423394,-4.803829),
  new google.maps.LatLng(50.508623,-4.692593));

        //need to set bounds to cornwall/bodmin
        var options = {
            bounds: defaultBounds,
          types: ['geocode'],
          componentRestrictions: {country: 'GB'}
        };
var autocomplete = new google.maps.places.Autocomplete(input,options);

现在这可行，但是例如，如果我输入“st n”，我希望它首先想出位于博德明的圣尼古拉斯街。但它会想出几英里外的st neot之类的东西。

我的一部分人认为我需要将类型设置为不同的值，但我现在很困惑。

编辑：我想要实现的示例是在 maps.google.com 页面上，如果您输入，Bodmin 然后将光标移动到逗号之前并开始输入街道名称，甚至是 Asda，它会将其保留在本地那个区域。我宁愿不必输入 ,bodmin ，但这是我可以解决的问题

如果有人有任何很棒的想法。然后我需要弄清楚用户如何输入一些值，比如"Asda"获取本地 asda 地址。

4

4 回答 4

4

目前不可能将结果限制在特定的位置，除非像您在上面所做的那样使用边界。然而，这只会使结果偏向但不限于包含在指定范围内的位置。

如果您认为按地区划分的结果将是一项有用的功能，请提交Places API - 功能请求。

正如您所提到的，如果您,Bodmin在查询末尾键入，则更有可能返回本地结果。临时解决方案可能是使用AutocompleteService并附加到requests 输入参数,Bodmin的末尾。getPlacePredictions()

于 2012-12-05T04:47:16.420 回答
3

将类型设置为区域。

    var options = {
        bounds: defaultBounds,
       types: ['(regions)'],
       componentRestrictions: {country: 'GB'}
     };
    var autocomplete = new google.maps.places.Autocomplete(input,options);

希望它有效..

于 2015-11-13T14:31:10.453 回答
0 
<div class="well container">
    <form role="form">
      <div class="form-group">
        <label for="locality" class="sr-only">Stadt oder PLZ</label>
          <input type="text" class="form-control" id="locality" name="locality" placeholder="Stadt oder PLZ" />
          <p class="help-block">Bitte zuerst die Stadt oder PLZ eingeben.</p>
      </div>
      <div class="form-group">
        <label for="route" class="sr-only">Straße / Hausnummer</label>
        <div class="row">
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-8" id="route" name="route" placeholder="Straße" disabled="true" />
          </div>
          <div class="col-xs-6">
            <input type="text" class="form-control col-xs-4" id="street_number" name="street_number" placeholder="Nr." disabled="true" />
          </div>
        </div>
      </div>
    </form>
</div>

<script>
var localityInput = document.getElementById('locality');
var localityOptions = {
  types: ['geocode'], //['(cities)'], geocode to allow postal_code
  componentRestrictions: {country: 'de'}
};
autocomplete = new google.maps.places.Autocomplete(localityInput, localityOptions);

google.maps.event.addListener(autocomplete, 'place_changed', function() {
    $('#route').attr('disabled', false).focus();
    $('#street_number').attr('disabled', false);

    var boundsByCity = autocomplete.getPlace().geometry.viewport;
    var routeInput = document.getElementById('route');
    var routeOptions = {
        bounds: boundsByCity,
        types: ['geocode']
    };
    new google.maps.places.Autocomplete(routeInput, routeOptions);
});
</script>

演示：jsfiddle

于 2014-11-05T19:45:39.623 回答
0 
var input = document.getElementById('inputSearch');
var cityBounds = new google.maps.LatLngBounds(
        new google.maps.LatLng(12.864162, 77.438610),
        new google.maps.LatLng(13.139807, 77.711895));
var options = {
        bounds: cityBounds,
        strictBounds: true,
        componentRestrictions: {country: 'in'}
    };
var inputBox = new google.maps.places.Autocomplete(input, options);
google.maps.event.addListener(inputBox, 'place_changed', function() {
        var place = inputBox.getPlace();
        console.log(place.geometry.location.lat() +', '+ place.geometry.location.lng());
    });

这对我很有用！

于 2018-03-20T17:03:56.147 回答