Javascript 如何格式化GoogleMapsAPI自动完成的输出结果

嗨，我正在尝试改变输出结果，如社区、城市和国家。我的意图是，当用户输入他的地址时，他只返回街道

我要删除的数据示例。

这是我的谷歌地图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>

函数initAutocomplete（）{
var map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-23.69389，
液化天然气：-46.565
},
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
var marker=new google.maps.marker({
职位：{
拉脱维亚：34.3630003，
液化天然气：-84.332207
},
地图：地图，
动画：google.maps.animation.DROP，
德拉格布尔：是的
});
var searchBox=new google.maps.places.searchBox（document.getElementById（'pac-input'）；
google.maps.event.addListener（搜索框，'places\u changed'，函数（）{
var places=searchBox.getPlaces（）；
var bounds=new google.maps.LatLngBounds（）；
var i，地点；
for（i=0；place=places[i]；i++）{
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
}
映射边界（bounds）；
map.setZoom（14）；
});
}
var map=document.getElementById（“map”）；
google.maps.event.trigger（映射，'resize'）；
google.maps.event.addDomListener（窗口'load'，initAutocomplete）；

这是我的搜索框

    <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

您的用例实际上更适合使用位置自动完成功能，而不是位置搜索框。你要做的是过滤所选地点的

address\u组件

数组，只获得

route

或

premise

等类似内容，这些内容就是“地址”的组成部分。 例：

然后简单地将输入字段的值替换为所选组件的组合。

inputField.value=addressString

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


一定要注意文档中关于

“您可能需要选择不同的组件以与邮政编码对齐
不同国家的地址格式。”




我还想提到的是，您提供的代码非常不完整，我试图创建一个最小的、可验证的、完整的示例，向您展示如何使用Autocomplete和address组件的基础知识

工作JSIDLE链接：

下面是附加的代码段：


var自动完成，
标记，
地图
inputField=document.getElementById（'pac-input'），
//这是您希望获得的地址组件的类型。您将筛选此对象并
//检查place结果是否包含这些地址组件中的任何一个。
//请注意，类型“locality”将无法检索到如此大的空间，没有这些属性的常规位置将无法检索到
//展示
组件形式={
街道编号：“短名称”，
路线：'long_name'，
子局部性级别1:“长名称”，
前提：“长名称”
};
函数initAutocomplete（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：{
lat:-23.69389，
液化天然气：-46.565
},
缩放：7，
mapTypeId:google.maps.mapTypeId.ROADMAP
});
marker=新的google.maps.marker({
职位：{
拉脱维亚：34.3630003，
液化天然气：-84.332207
},
地图：地图，
动画：google.maps.animation.DROP，
德拉格布尔：是的
});
//创建自动完成对象，将搜索限制为地理位置
//位置类型。
autocomplete=new google.maps.places.autocomplete(
/**@type{！HTMLInputElement}*/
（输入字段）{
类型：['geocode']
});
//当用户从下拉列表中选择地址时，填充该地址
//表单中的字段。
autocomplete.addListener（'place\u changed'，fillInAddress）；
}
函数fillInAddress（）{
var place=autocomplete.getPlace（）；
var bounds=new google.maps.LatLngBounds（）；
var addressString=“”；
if（place.geometry）{
扩展（place.geometry.location）；
标记器.设置位置（位置.几何.位置）；
}
//从place details中获取地址的每个组件
//并在表单上填写相应的字段。
对于（变量i=0；i

#地图{
身高：100%；
}
/*可选：使示例页面填充窗口*/
html，
身体{
身高：100%；
保证金：0；
填充：0；
}

家
恩德雷索：
您是指在单击自动完成建议后更改要显示的内容吗？@henrisycip在单击suggestionwork perfect后，我可以扩展功能吗？示例在输入字段中添加邮政编码输出？当然！继续阅读关于它的文章，你会发现你可以简单地从
componentForm
中添加/删除属性，看看你想从结果中得到什么。然后是将字符串附加到输入字段的问题。
componentForm = {
  street_number: 'short_name',
  route: 'long_name',
  sublocality_level_1: 'long_name',
  premise: 'long_name'
};