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

示意图：

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>

主要部分的代码

由于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_componentslet 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 表示巴士、火车或公交车站的位置。

谷歌地图地址地址自动完成框相关推荐

osmdroid 在线加载谷歌瓦片（谷歌地图瓦片地址解释）
osmdroid作为一个开源的项目,在在线地图上还是做的不错,离线地图上也能支持多种格式,例如:zip,sqlite,.mbtiles,gemf,map,gpkg等格式.就是不能直接加载shp文件大为 ...
google map谷歌地图瓦片地址无偏移矢量地图电子地图影像地图
前几天做谷歌地图踩大坑,目前网上很多文字的瓦片地址是可以访问但,矢量地图有偏移,你将矢量地图和影像地图同时加载出来就会发现两个地图不能完全的重合,而且连标注都没有和地图重合.那是因为矢量地图做了偏移影 ...
高德地图加载谷歌地图瓦片
简介苦逼外业实验需要用到无人机采集数据,遂利用高德地图SDK和DJI Mobile SDK开发了一款无人机航线规划软件.当地也不算偏僻,然而高德卫星地图缩放等级约为16,无法满足作业需求.调查了其他 ...
python 根据地址求经纬度谷歌_js获取ip地址利用谷歌地图获得经纬度
js获取ip地址利用谷歌地图获得经纬度-www.jquerycn.cn var massage=null; function userip(ip){ $.getScript("http:/ ...
通过ip地址查询物理地址显示谷歌地图
显示IP地址的地理位置地图 http://www.ip62.com/ipmap.php 一个调用谷歌地图api的简单应用.<html xmlns="http://www.w3.org/ ...
如何在谷歌地图上标注公司地址（实例讲解）
为什么80%的码农都做不了架构师?>>> 准备工作谷歌账号密码相关真实有效的公司信息执行步骤 1.登录http://www.google.com/local/add, 提 ...
百度、谷歌、雅虎网站地图提交地址
Baidu地图提交地址 :http://www.baidu.com/search/url_submit.html Google地图提交地址:https://www.google.com/webmast ...
用一个二维码做下载地址，自动区分是 ios 还是 android
用一个二维码做下载地址,自动区分是 ios 还是 android, 甚至区分 iphone 和 ipad. <html><head><meta http-equiv=& ...
网站调用百度地图根据地址查询经纬度
百度地图API简单应用-根据地址查询经纬度简单几步注册获得一个ak,就能直接调用(PS:好像1.3版本前的无需注册获取ak,就能直接调用api). 闲话不多,下面就直接给大家介绍下,具体要怎么调用百 ...

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

谷歌地图地址地址自动完成框相关推荐

最新文章

热门文章