Google Maps Javascript API，获取社区名称答案

【问题标题】：Google Maps Javascript API, get neighborhood nameGoogle Maps Javascript API，获取社区名称
【发布时间】：2021-11-15 11:37:36
【问题描述】：

当用户搜索他们的社区时，我需要动态创建社区记录。 This example here 使用 Google Maps API 返回完美的结果。

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

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”。

感谢任何回应。

【问题讨论】：

在您的自动完成选项中使用适当的types 参数。
不幸的是，当我更改为任何其他类型时，我看不到任何结果。除了类型字段上的“地址”之外，它似乎不起作用。
types: ['geocode'] 对我来说适用于您提供的示例，但不适用于 address_components 字段。
哦，好的，谢谢。是的，它也有效
你应该调整你的答案，因为它不是一个解决方案，而是一个解决方法。

标签： javascript google-maps google-maps-api-3 geolocation

【解决方案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);
}

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

【讨论】：