Google 地图 Javascript API，获取社区名称

Question

我需要在用户搜索他们的社区时动态创建社区记录。 This example here 使用 Google 地图 API returns 完美的结果。

例如，当我搜索 Magrath Heights 时，我可以在自动完成和结果中看到它（社区：Magrath Heights）。但是，在我的示例中我没有得到相同的结果：

index.html

<html>
    <head>
        <meta charset="utf-8">
        <title>Google Location Search Example</title>

<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
        <!-- JavaScript Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-/bQdsTh/da6pkI1MST/rWKFNjaCP5gBSY4sEBT38Q/9RBh9AH40zEOg7Hlq2THRZ" crossorigin="anonymous"></script>
    <script src="./index.js"></script>
    </head>
    <body>
        <div class="container">
            <form id="address-form" action="" method="get" autocomplete="off">
                <div class="mb-3">
                    <label for="exampleInputEmail1" class="form-label">Your location</label>
                    <input type="text" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
                    <div id="emailHelp" class="form-text">Type your community, or location name</div>
                </div>
            </form>
        </div>
        <div class="container" id="pnlresults">
            Start typing to see the location info.
        </div>

<script async
    src="https://maps.googleapis.com/maps/api/js?key=XYZ&libraries=places&callback=initAutocomplete">
</script>
    </body>
</html>

index.js

let autocomplete;
let searchField;
let results;

function initAutocomplete(){
    searchField = document.querySelector("#exampleInputEmail1");
    results = document.querySelector("#pnlresults");

    autocomplete = new google.maps.places.Autocomplete(
        searchField,
        {
            componentRestrictions: { country: ["ca","in","ae"] },
            fields: ['address_components'],
            types:['address'],
        }
    );
    
    searchField.focus();
    autocomplete.addListener('place_changed',onPlaceChangedNeighborhood);
}

function onPlaceChangedNeighborhood(){
    const place = autocomplete.getPlace();

    let neighborhood = "";
    let province = "";
    let country = "";

    for (const component of place.address_components) {
        const componentType = component.types[0];

        switch (componentType) {
            case "administrative_area_level_1": {
                province =component.long_name;
                break;
            }
            case "sublocality_level_1":{
                neighborhood = component.short_name
                break;
            }
            case "country":
            {
                country = component.long_name
                break;
            }
        }
    }  
    
    results.innerHTML = "Neighborhood: " + neighborhood + "<br/>Province/state: " + province + "<br/>Country = " + country;
}

您知道为什么我没有在搜索结果中看到马格拉斯高地，也没有在结果中看到附近地区吗？我尝试了其他一些组件类型，例如 'locality'.

感谢任何回复。

Answer 1

好的，我明白了。如果其他人有此问题，这就是您要做的。

我从这里更改了我的 initAutocomplete()；

function initAutocomplete(){
    searchField = document.querySelector("#exampleInputEmail1");
    results = document.querySelector("#pnlresults");

    autocomplete = new google.maps.places.Autocomplete(
        searchField,
        {
            componentRestrictions: { country: ["ca","in","ae"] },
            fields: ['address_components','name','geometry'],
            types:['address'],
        }
    );
    
    searchField.focus();
    autocomplete.addListener('place_changed',onPlaceChangedNeighborhood);
}

对此（删除了新 google.maps.places.Autocomplete 中除搜索字段之外的所有参数）：

function initAutocomplete(){
    searchField = document.querySelector("#exampleInputEmail1");
    results = document.querySelector("#pnlresults");

    autocomplete = new google.maps.places.Autocomplete(
        searchField
    );
    
    searchField.focus();
    autocomplete.addListener('place_changed',onPlaceChangedNeighborhood);
}

我不确定缺点（更一般的结果等）

Google 地图 Javascript API，获取社区名称

Google Maps Javascript API, get neighborhood name

javascript

google-maps

geolocation

google-maps-api-3