Google Maps Javascript API搜索社区及提取名称异常问题咨询

问题原因及解决方法 #

你遇到的问题由两个配置错误共同导致：

• 第一，自动补全的返回类型被限制为仅精确地址，社区类结果不会被返回
  你当前的Autocomplete配置中types:['address']参数，会强制API仅返回精确到街道门牌号的地址结果，而Magrath Heights属于社区（neighborhood）级别的区域，不在address类型的返回范围内，因此你输入关键词后自动补全列表不会出现对应选项。
  修改方案：将types参数调整为types: ['geocode']，支持返回地址、行政区、社区等所有地理编码结果；如果仅需要区域类结果，也可设置为types: ['(regions)']。

• 第二，社区字段的提取逻辑覆盖不全
  你当前仅判断了sublocality_level_1作为社区字段，但不同地区的社区对应的地址组件类型可能是neighborhood、sublocality_level_2等，你没有覆盖这些类型，就算API返回了对应信息也无法正确提取。
  修改方案：在switch分支中新增对应类型的判断即可。

修改后的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:['geocode'], // 此处修改类型参数
        }
    );
    
    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;
            }
            // 新增neighborhood和其他子区域类型的判断
            case "neighborhood":
            case "sublocality_level_1":
            case "sublocality_level_2":
            case "sublocality":{
                neighborhood = component.short_name
                break;
            }
            case "country":
            {
                country = component.long_name
                break;
            }
        }
    }  
    
    results.innerHTML = "Neighborhood: " + neighborhood + "<br/>Province/state: " + province + "<br/>Country = " + country;
}

内容的提问来源于stack exchange，提问作者Rhonald