谷歌地图地址地址自动完成框

示意图：

1.申请一个google账号,参照百度经验

2.google地图配置

3.获取秘钥
点击画面中 API 与服务中的凭据 ，进入如下页面：

点击API秘钥,会生成一个秘钥

新增项目：按照如图的顺序创建一个新的项目

选中项目，开始配置对应的api

启用相关api的操作：点击左侧菜单API 和服务 -> 库 出现如下界面，

点击进入对应的api界面：以 Maps JavaScript API 为例

如果是没有启用过的，页面会有一个启用按钮

绑定付费账户:(具体的绑定看文档吧，2333333333)

3.谷歌地图地址地址自动完成框 需要开启api :Maps JavaScript API ,

4.引入账号google map的 js

	<script  src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_KEY&libraries=places"
    type="text/javascript"></script>

5. 主要部分的代码

由于input触发过于频繁，暂时改成了change 触发 ，txtPlaces 是自己定义的输入框的id

	google.maps.event.addDomListener(node, 'change', function () {
        var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
        //place_changed  是搜索出地址之后，选择时触发
        google.maps.event.addListener(places, 'place_changed', function () {
           var place = places.getPlace();
           // place 包含了所有的需要的地址信息
           var address = place.formatted_address;//address_components
           let res = place.address_components;
           that.computedSAddress(res);
           that.checkout.addressFirst = address;
        });
     });

可以自己根据需要进行取值显示

其中，每条数据后面都有各自的类型

类型说明：

	地址类型和地址组成部分类型
	结果中的 types[] 数组表示地址类型。地址类型的示例包括街道地址、国家/地区或政治实体。在 address_components[] 中也有一个 types[] 数组，用来表示地址各个部分的类型。示例包括门牌号码或国家/地区。（以下是类型的完整列表。）地址可能有多种类型。这些类型可能会被视为“标记”。例如，许多城市都标有 political 和 locality 类型。
	
	地理编码器以地址类型和地址组成部分类型数组这两种形式支持并返回以下类型：
	
	street_address 表示精确的街道地址。
	route：表示已命名的路线（例如“US 101”）
	intersection：表示主要交叉路口，通常是两条主要道路的交叉路口
	political：表示政治实体。通常，这种类型表示某个民政管理部门的多边形
	country：表示国家政治实体，通常是由地理编码器返回的最高级别类型
	administrative_area_level_1：表示国家/地区级别以下的一级行政实体。在美国，这种行政级别就是州。并非所有国家都设有这类行政级别
	administrative_area_level_2：表示国家/地区级别以下的二级行政实体。在美国，这种行政级别就是县。并非所有国家都设有这类行政级别
	administrative_area_level_3：表示国家/地区级别以下的三级行政实体。此类型表示较小的行政区划单位。并非所有国家都设有这类行政级别
	administrative_area_level_4：表示国家/地区级别以下的四级行政实体。此类型表示较小的行政区划单位。并非所有国家都设有这类行政级别
	administrative_area_level_5：表示国家/地区级别以下的五级行政实体。此类型表示较小的行政区划单位。并非所有国家都设有这类行政级别
	colloquial_area：表示实体的常用替代名称
	locality 表示合并的城市或城镇政治实体。
	ward 表示一种特定的日本行政区划类型，以便于区分某个日本地址中的多个行政区划组成部分。
	sublocality：表示 locality 以下的一级行政实体。某些位置可能会收到其他类型之一：从 sublocality_level_1 到 sublocality_level_5。每个 sublocality 级别都是一个行政实体。数字越大，表示的地理区域越小
	neighborhood 表示已命名的街区
	premise 表示已命名的位置，通常是具有常见名称的一栋或一群建筑物
	subpremise 表示指定位置以下的一级实体，通常是同名建筑群中的单个建筑物
	postal_code 表示邮政编码，用于国内的地址邮寄。
	natural_feature：表示著名的自然景观
	airport：表示机场
	park：表示已命名的公园。
	point_of_interest 表示已命名的景点。通常，这些“景点”是不容易归入其他类别的著名地方实体，如“帝国大厦”或“自由女神像”。
	空的类型列表表示特殊的地址组成部分没有对应的已知类型，例如法国的地方 (Lieu-dit)。
	
	除了上述类型之外，地址组成部分还可能包括下列类型。
	floor：表示某个建筑物地址的楼层
	establishment 通常表示某个尚未归类的地方。
	point_of_interest 表示已命名的景点。
	parking 表示停车场或停车设施。
	post_box 表示特定的邮政信箱。
	postal_town 表示地理区域的分组，如 locality 和 sublocality，在某些国家/地区用于邮寄地址。
	room 表示某个建筑物地址的房间。
	street_number 表示确切的门牌号码。
	bus_station、train_station 和 transit_station 表示巴士、火车或公交车站的位置。