首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Google Maps API Autocomplete -如何仅输出街道名称?

Google Maps API Autocomplete是一种提供地址自动补全功能的API。它可以根据用户输入的部分地址或关键词,实时返回匹配的地址建议列表。

要仅输出街道名称,可以使用Google Maps API Autocomplete的组件过滤器功能。通过设置组件过滤器,可以限制返回结果的类型为街道(street_address)。

以下是一个示例代码,演示如何使用Google Maps API Autocomplete仅输出街道名称:

代码语言:txt
复制
// 引入Google Maps API Autocomplete库
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&libraries=places"></script>

// 创建Autocomplete对象
var autocomplete = new google.maps.places.Autocomplete(document.getElementById('autocomplete'));

// 设置组件过滤器,仅返回街道地址
autocomplete.setComponentRestrictions({'country': 'us'});
autocomplete.setTypes(['street_address']);

// 监听地址选中事件
autocomplete.addListener('place_changed', function() {
  var place = autocomplete.getPlace();
  if (place.address_components) {
    // 输出街道名称
    var streetName = '';
    for (var i = 0; i < place.address_components.length; i++) {
      var component = place.address_components[i];
      if (component.types.includes('route')) {
        streetName = component.long_name;
        break;
      }
    }
    console.log(streetName);
  }
});

在上述代码中,我们首先引入了Google Maps API Autocomplete库,并创建了一个Autocomplete对象。然后,通过设置setComponentRestrictions方法,将结果限制为美国的地址。接下来,使用setTypes方法将结果类型限制为街道地址。最后,我们监听了地址选中事件,并从选中的地址中提取街道名称。

推荐的腾讯云相关产品是腾讯位置服务(Tencent Location Service),它提供了类似Google Maps API的地理位置服务。您可以通过腾讯云官方网站了解更多关于腾讯位置服务的信息:腾讯位置服务

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

基于腾讯地图定位组件实现周边公用厕所远近排序分布图

接口; 街道与卫星地图切换控件; 缩放控件; 开发实战 1、引入功能库和附件库 <script charset="utf-8" src="https://map.qq.com...v=2.exp&libraries=drawing,geometry,<em>autocomplete</em>,convertor&key={$appkey}"> <script type="..., position.lng) }); 读取信息点(POINTS)并在地图上标注 1、标准JSON数据格式 为方便展示,此处<em>仅</em>展示数据格式,实际应用做,使用ajax获取即可。...address=北京市海淀区彩和坊路海淀西大街74号&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77 /*地址转坐标封装函数,文件<em>名称</em>为points.php *$address...建议的加载方式:src不使用协议<em>名称</em>,让其自动匹配。如: <script charset="utf-8" src="//map.qq.com/<em>api</em>/js?

1.5K71

通过卫星和街道图像进行多模式深度学习,以测量城市地区的收入,拥挤度和环境匮乏

街道级别的图片是使用Google Street View APIGoogle Maps提取的。...对于伦敦的每个邮政编码(ONS,2017),API返回Google最近拍摄的最近可用全景图像的唯一标识符(如果有)。时间戳记从2008年到2018年不等。...MSL街道图像用于生成这些地图。MSATinSL既利用了卫星图像,又利用了街道图像,并通过预测的十分位数地图观察到了增强的测量性能。地图用颜色编码,其中红色对应于最差定义,而蓝色对应于最佳定义。...MSAT将卫星图像用于生成这些地图。MSLinSAT利用我们提出的方法将卫星图像和街道图像结合使用,并通过预测的十分位数地图观察到了增强的测量性能。...街道级图像用于可用于每个图块覆盖的地理区域的预测。由于空间限制,图中未显示单个街道级别的图像。图片由Planet提供。

91740
  • 如何使用AngularJS和PHP为任何位置生成短而独特的数字地址

    在本教程中,您将开发一个Web应用程序,该应用程序使用Google Maps API为您选择的任何地址生成一个简短的数字地址。...您可以按照教程如何在Ubuntu 18.04上快速安装Git来安装和设置Git。 第1步 - 获取Google API密钥 在本教程中,您将使用JavaScript创建Google Maps的界面。...如果您尚未登录Google帐户,系统会要求您这样做。然后,窗口会要求您提供项目的名称,这可以是您想要的任何名称: 在此之后,它会要求您输入结算信息。...这是因为您尚未将Google API密钥添加到该geoimplement.php文件中,从而实际调用了Google Maps API。...第8步 - 启用对Google Maps API的调用 此应用程序依赖于Google Maps API将物理地址转换为适当的纬度和经度坐标。

    13.2K20

    R语言ggmap空间可视化机动车交通事故地图|附代码数据

    p=12350 最近我们被客户要求撰写关于空间可视化的研究报告,包括一些图形和统计输出。 在本文中,我使用ggmap可视化纽约市的交通事故 数据来自纽约市开放数据。...该数据跟踪车辆的类型,发生事故的街道名称以及事故的经度和纬度坐标。两个坐标都保存为单个字符变量,称为“ LOCATION”。...2013'),c('long','lat')] d_2014=d_clean[which(d_clean$year=='2014'),c('long','lat')] 接下来,我使用get_map()查询Google...Maps并获取纽约市的地图。...我编写了一个函数boro(),该函数会删除所有缺少街道名称的观测值,并基于自治市镇(2013)子集。我将它们堆叠在一起,同时添加自治市镇名称,然后在向量col_vals中为每个自治市镇分配一种颜色。

    19720

    Baidu与Google地图API初探

    开放API),也查看了它们的SDK开发文档,谈谈自己的体会 Map API文档 BMap API(Baidu)与google.maps APIGoogle)文档相对最完备、详尽、简洁,并且给出了很多学习示例...BMap APIGoogle.maps API,应该就可以满足绝大部分需求 就易用性和色彩柔和性,推荐BMap API(Baidu) 就精确性和世界地图,推荐Google.maps API...); Google google.maps则提供全球区域的地图(支持本地化语言) 3D效果: Baidu BMap目前提供中国几个大城市3D地图(如北、上、广和深圳) Google google.maps...则支持大部分国家的车载导航3D地图(在中国支持部分城市,如上海) API风格: BMap APIgoogle.mapsAPI接口略有不同,BMap模块化分层设计更加独立;两者的API风格,...简单对比  BMap API(Baidu)和google.maps APIGoogle)——都是以“天安门”为参照系原点 BMap API(Baidu) <!

    2.6K40

    Baidu与Google地图API初探

    ,也查看了它们的SDK开发文档,谈谈自己的体会 Map API文档 BMap API(Baidu)与google.maps APIGoogle)文档相对最完备、详尽、简洁,而且给出了非常多学习演示样例...功能推荐 BMap APIGoogle.maps API,应该就能够满足绝大部分需求 就易用性和色彩柔和性,推荐BMap API(Baidu) 就精确性和世界地图,推荐Google.maps API(...(40.69847032728747, -73.9514422416687) 世界性: Baidu BMap提供中国区域,也包括港、澳,但眼下还不包括台湾(可能百度日本分公司的地图中含有台湾); Google...google.maps则提供全球区域的地图(支持本地化语言) 3D效果: Baidu BMap眼下提供中国几个大城市3D地图(如北、上、广和深圳) Google google.maps则支持大部分国家的车载导航...3D地图(在中国支持部分城市,如上海) API风格: BMap APIgoogle.mapsAPI接口略有不同,BMap模块化分层设计更加独立;两者的API风格,能够代表其他几款开放的Map API

    1.7K20

    ​人工智能是如何改变Google地图的?

    用户现在可以很容易地看到街道名称和地址,因为机器学习工具使地图变得更好。 例如,最新的谷歌地图版本可以准确定位拥挤城市的所有区域。...Google Maps live功能是从机器学习发展而来的,它告诉用户目的地所需的距离。城市的物理图像对于实时特征与传感器一起工作非常重要。...Google Maps收购 谷歌地图的收购 在进一步讨论之前,让我们回顾一下谷歌地图完成的一些收购 Waze 收购Waze之际,谷歌地图希望用户在其地图应用程序上提高体验感。...来自Keyhole的数据库信息通过增强地图上的缩放功能使Google地图工作得更好。 以前,手动搜索机场和街道等位置会给用户带来挑战,但随着Keyhole的出现,搜索变得更好,结果也更准确。...原文链接:https://medium.com/swlh/ai-google-maps-79237f8946e3

    2.3K20

    DeepMind发布新算法,将谷歌地图行程时间估算准确率提升50%

    大数据文摘出品 来源:VB 编译:睡不着的iris 据报道,在诸如柏林、雅加达、圣保罗、悉尼、东京和华盛顿(特区)的地区,谷歌地图和谷歌地图平台API中的实时驾驶ETAs(预计到达时间)预测准确率提高了...DeepMind在官方博文中指出,“例如,考虑隔壁街道的交通拥堵,会如何影响更大路段的交通。通过跨越多个交叉路口,模型可以自动预测转弯处的延误时间,归并引发的延误和走走停停的通行时间。”...DeepMind与谷歌地图团队遵循实验室与谷歌产品部门的其他合作关系,包含努力改进Google Play商店的发现系统。...相关报道: https://venturebeat.com/2020/09/03/deepmind-claims-its-ai-improved-google-maps-travel-time-estimates-by-up-to

    93310

    谷歌离线地图Api附获取教程

    Map API 离线文件源码 谷歌官方地图平台文档:https://developers.google.cn/maps/documentation 开始打开谷歌官方网站的“Google官方地图平台文档...获取最新版本Google Map API 离线源码相关图片资源 前文讲解了如何获取最新版本 Google Map API 离线源码的方法,现在我们可以用同样的方法通过打开所有 Google Map API...Google Map API JS 源代码的本地化修改 到目前为止,我们已经将 Google Map API 的全部JS文件和相关的图片资源文件下载到了本地。...在“js.js”文件中查找“zh_cn”,然后将代码“https://maps.proxy.ustclug.org/maps-api-v3/api/js/41/5/intl/zh_cn” 替换为“GoogleMapAPI...本站提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

    3.3K40

    google maps api_js调用谷歌浏览器接口

    就用 maps.google.com 2.file=api 这个是请求API 的JS 文件用的,固定的格式。...3.hl=zh-CN 这个是在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用提示等所需要显示文本的语言版本时候用的,假如没有指定这个参数就使用 API 的默认值,对itu.google.com...注:目前谷歌地图 API的主版本号是2,当API升级时旧版本只能继续使用一个月,所以要及时更改主版本号,版本号改变会在Google Code和Maps API讨论组发布相关信息 5.key=abcdefg...五:浏览器兼容性 Google Maps API支持的浏览器种类与Google地图网站相同。...http://maps.google.com/maps?file=api&v=2里面的脚本似乎可以在任何浏览器里面解析而不产生错误,所以您可以在检查浏览器兼容性之前就包含脚本文件。

    5.7K10

    第18篇-用ElasticSearch索引MongoDB,一个简单的自动完成索引项目

    02.Elastic Stack功能介绍 03.如何安装与设置Elasticsearch API 04.如果通过elasticsearch的head插件建立索引_CRUD操作 05.Elasticsearch...MongoDB的局限性 如果您快速进行Google搜索, MongoDB full text 则会在MongoDB文档中发现支持全文搜索。...因此,这条边缘n-gram绝对应该成为索引的一部分,这就是我们如何定义它 { “ filter”:{ “ autocomplete_filter”:{...在我们的案例中,我们不在乎分析器和映射,我们将导入数据,因为分析器和映射已在 fulltext_opt 索引中定义。...您可以看到如何通过json文件配置mongo-connector,在这里我将使用命令行参数方式。 该 -n 选项将告诉mongo-connector我们要索引MongoDB中的哪些集合。

    5.3K00
    领券