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

は非常に不完全であり、私はあなたにどのようにの基本を示すために、それから、最小限の、検証可能な、完全な例を作成してみましたオートコンプリートを使用してコンポーネントをアドレス指定します。以下https://jsfiddle.net/yy3p7hh9/1/

付属のコードスニペット：jsfiddleリンクの作業

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>