如何格式化Google Maps API的输出结果自动完成

Question

嗨，我尝试更改输出结果，如邻居，城市和国家。我的意图是，当用户输入他的地址时，他只返回街道。

我想删除的数据的示例。

这是我的Google Maps API脚本。

<script> 
    function initAutocomplete() { 
     var map = new google.maps.Map(document.getElementById('map'), { 
     center: { 
      lat: -23.69389, 
      lng: -46.565 
     }, 
     zoom: 7, 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
     }); 

     var marker = new google.maps.Marker({ 
     position: { 
      lat: 34.3630003, 
      lng: -84.332207 
     }, 
     map: map, 
     animation: google.maps.Animation.DROP, 
     draggable: true 
     }); 

     var searchBox = new google.maps.places.SearchBox(document.getElementById('pac-input')); 

     google.maps.event.addListener(searchBox, 'places_changed', function() { 
     var places = searchBox.getPlaces(); 
     var bounds = new google.maps.LatLngBounds(); 
     var i, place; 

     for (i = 0; place = places[i]; i++) { 
      bounds.extend(place.geometry.location); 
      marker.setPosition(place.geometry.location); 
     } 

     map.fitBounds(bounds); 
     map.setZoom(14); 
     }); 
    } 

    var map = document.getElementById("map"); 
    google.maps.event.trigger(map, 'resize'); 

    google.maps.event.addDomListener(window, 'load', initAutocomplete); 
    </script> 

这是我的搜索框。

<div class="input-field col s6"> 
     <i class="material-icons prefix">home</i> 
     <input placeholder="Defina um endereço para seu fornecedor" id="pac-input" name="addressRouteTransporter" type="text" class="validate"> 
     <label for="addressRouteTransporter">Endereço:</label> 
    </div> 

感谢您的帮助的xD

Answer 1

您的使用案例其实更适合使用商家信息自动填充功能，而不是地方搜索盒是。你要做的就是过滤选中的地方的address_components数组，并且只能得到route或premise等等，这就是“地址”由什么组成。 例：

componentForm = { 
    street_number: 'short_name', 
    route: 'long_name', 
    sublocality_level_1: 'long_name', 
    premise: 'long_name' 
}; 

然后，只需输入字段的值替换到您选择组分的组合。 inputField.value = addressString;

我建议在这里阅读更多关于它：

• Google sample一定要注意在doc警告有关

“您可根据需要选择不同的组件以便与不同国家的邮政地址格式 保持一致。“

• Google documentation

我也想提一提你提供的代码是非常不完整，我试图创建一个最小的，可核查的，完整的例子了它向你展示如何将基础知识使用自动完成和地址组件。

工作的jsfiddle链接：https://jsfiddle.net/yy3p7hh9/1/

附加代码片段如下：

var autocomplete, 
 
marker, 
 
map, 
 
inputField = document.getElementById('pac-input'), 
 
// this is the type of address components you would like to get. You will filter through this object and 
 
// check if the place result has any 1 of these address components. 
 
// Notice how type 'locality' will not be retrieved so big, general places without these properties will not 
 
// show 
 
componentForm = { 
 
    street_number: 'short_name', 
 
    route: 'long_name', 
 
    sublocality_level_1: 'long_name', 
 
    premise: 'long_name' 
 
}; 
 

 
function initAutocomplete() { 
 
    map = new google.maps.Map(document.getElementById('map'), { 
 
    center: { 
 
     lat: -23.69389, 
 
     lng: -46.565 
 
    }, 
 
    zoom: 7, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    }); 
 

 
    marker = new google.maps.Marker({ 
 
    position: { 
 
     lat: 34.3630003, 
 
     lng: -84.332207 
 
    }, 
 
    map: map, 
 
    animation: google.maps.Animation.DROP, 
 
    draggable: true 
 
    }); 
 

 
    // Create the autocomplete object, restricting the search to geographical 
 
    // location types. 
 
    autocomplete = new google.maps.places.Autocomplete(
 
    /** @type {!HTMLInputElement} */ 
 
    (inputField), { 
 
     types: ['geocode'] 
 
    }); 
 

 
    // When the user selects an address from the dropdown, populate the address 
 
    // fields in the form. 
 
    autocomplete.addListener('place_changed', fillInAddress); 
 
} 
 

 
function fillInAddress() { 
 
    var place = autocomplete.getPlace(); 
 
    var bounds = new google.maps.LatLngBounds(); 
 
    var addressString = ''; 
 

 
    if (place.geometry) { 
 
    bounds.extend(place.geometry.location); 
 
    marker.setPosition(place.geometry.location); 
 
    } 
 

 
    // Get each component of the address from the place details 
 
    // and fill the corresponding field on the form. 
 
    for (var i = 0; i < place.address_components.length; i++) { 
 
    // warning this only gets the first type of the component. E.g. 'sublocality_level_1' 
 
    var addressType = place.address_components[i].types[0]; 
 
    if (componentForm[addressType]) { 
 
     var val = place.address_components[i][componentForm[addressType]]; 
 
     addressString += ' ' + val + ','; 
 
    } 
 
    } 
 
    // just remove the last comma 
 
    addressString = addressString.replace(/,\s*$/, ""); 
 
    inputField.value = addressString; 
 
    console.log(addressString); 
 
    map.fitBounds(bounds); 
 
    map.setZoom(14); 
 
}

#map { 
 
    height: 100%; 
 
} 
 

 

 
/* Optional: Makes the sample page fill the window. */ 
 

 
html, 
 
body { 
 
    height: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
}

<div class="input-field col s6"> 
 
    <i class="material-icons prefix">home</i> 
 
    <input placeholder="Defina um endereço para seu fornecedor" id="pac-input" name="addressRouteTransporter" type="text" class="validate"> 
 
    <label for="addressRouteTransporter">Endereço:</label> 
 
</div> 
 
<div id="map"></div> 
 
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCD0rWgXRVBa7PgaTWXVp_gU51pgHGviYY&libraries=places&callback=initAutocomplete" async defer></script>