如何将 Google 个地点自动完成限制在半径范围内

Question

我想将地点自动完成 API 结果偏向用户位置周围的半径。

我在 Places API Documentation 中看到我应该使用 components，但我不确定语法，也找不到示例。 我已经在项目的另一部分拥有用户的当前位置，因此可以忽略此 post。

<script src="https://maps.googleapis.com/maps/api/js?key=[KEY]&libraries=places&callback=initAutocomplete" async defer></script>

<script>
    function initAutocomplete() {        
        var input = document.getElementById('directions-from');
        new google.maps.places.Autocomplete(input);
    }
</script>

<div class="row">
    <div class="col-6">
        <label for="directions-from">From:</label>
        <input id="directions-from" placeholder="Enter a place" class="form-control" type="text" />
        <br />
        <label for="directions-to">To:</label>
        <input type="text" id="directions-to" class="form-control" value="@formatToAddressInput" disabled />
        <br />
        <input type="button" value="Go" onclick="setMapAddress()" />
        <input type="button" value="Clear" onclick="clearInput()" />
    </div>
</div>

<div class="row">
    <div class="col-12">
        <iframe 
            height="350" 
            id="google-maps" 
            width="600" 
            frameborder="0" 
            style="border:0" 
            referrerpolicy="no-referrer-when-downgrade"                 
            src="https://www.google.com/maps/embed/v1/directions?key=[KEY]&origin=@formatToAddressAPI&destination=@formatToAddressAPI">
        </iframe>
    </div>
</div>

<script>
    function clearInput() {
        $('#directions-from').val("");
    }

    function setMapAddress() {
        if ($('#directions-from').val().length > 1) {
            var address = $('#directions-from').val();
            address = address.replace(' ', '+');

            var mapsURL = $('#google-maps').attr('src');
            var url = new URL(mapsURL);
            url.searchParams.set("origin", address);

            //reload iFrame
            console.log(url);
            document.getElementById('google-maps').src = url;
        }
    }
</script>

Answer 1

您查看的文档有误。您在问题中链接的是 web-service，而不是属于 Javascript API.

的小部件

正确的文档是 here。

您不能使用 location/radius 来调整结果，但您可以使用 bounds.

bounds is a google.maps.LatLngBounds object specifying the area in which to search for places. The results are biased towards, but not restricted to, places contained within these bounds.

您还可以使用

将搜索限制在这些范围内

strictBounds is a boolean specifying whether the API must return only those places that are strictly within the region defined by the given bounds. The API does not return results outside this region even if they match the user input.

示例：

const center = new google.maps.LatLng(52.518588, 13.369337);

// Create a bounding box with sides ~10km away from the center point
const defaultBounds = {
  north: center.lat + 0.1,
  south: center.lat - 0.1,
  east: center.lng + 0.1,
  west: center.lng - 0.1,
};

const input = document.getElementById('directions-from');
const options = {
  bounds: defaultBounds,
  fields: ["address_components"], // Or whatever fields you need
  strictBounds: true, // Only if you want to restrict, not bias
  types: ["establishment"], // Whatever types you need
};

const autocomplete = new google.maps.places.Autocomplete(input, options);

如何将 Google 个地点自动完成限制在半径范围内

How to restrict Google Places Autocomplete to radius

javascript

html

google-maps

google-places-api