`
天梯梦
  • 浏览: 13741588 次
  • 性别: Icon_minigender_2
  • 来自: 洛杉矶
社区版块
存档分类
最新评论

谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

 
阅读更多
In this article I will explain with an example, how to implement the Google Places Autocomplete without using Google Maps.
 
In addition to this article will also explain how to use the Place changed event handler of the Google Autocomplete TextBox to get the selected place, its address and its location coordinates i.e. Latitude and Longitude.
 
Implementing Google Places Autocomplete without using Google Maps
The HTML Markup consists of an HTML TextBox using which the Google Places Autocomplete will be implemented.
The very first thing is to inherit the Google Maps API script along with the places library. Then inside the Google Maps window load event handler, the Google Places Autocomplete is applied to the TextBox and then the place_changed event handler is assigned to it.
 
The place_changed event handler is triggered when a place is selected in the Google Places Autocomplete TextBox. It first gets the selected place and then determines its address and its location coordinates i.e. Latitude and Longitude and then displays the details in JavaScript alert message box.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script>
    <script type="text/javascript">
        google.maps.event.addDomListener(window, 'load', function () {
            var places = new google.maps.places.Autocomplete(document.getElementById('txtPlaces'));
            google.maps.event.addListener(places, 'place_changed', function () {
                var place = places.getPlace();
                var address = place.formatted_address;
                var latitude = place.geometry.location.A;
                var longitude = place.geometry.location.F;
                var mesg = "Address: " + address;
                mesg += "nLatitude: " + latitude;
                mesg += "nLongitude: " + longitude;
                alert(mesg);
            });
        });
    </script>
    <span>Location:</span>
    <input type="text" id="txtPlaces" style="width: 250px" placeholder="Enter a location" />
</body>
</html>
 
Google Autocomplete TextBox displaying places
谷歌无地图地址自动完成Google Places AutoComplete example without using Maps
谷歌无地图地址自动完成Google Places AutoComplete example without using Maps
JavaScript alert displaying the details of the selected place
谷歌无地图地址自动完成Google Places AutoComplete example without using Maps
谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

下载:Google_Places_Autocomplete

原文:http://www.aspsnippets.com/Articles/Google-Places-AutoComplete-example-without-using-Maps.aspx

转自:谷歌无地图地址自动完成Google Places AutoComplete example without using Maps

 

 

分享到:
评论

相关推荐

    react-places-autocomplete:用于Google Maps Places Autocomplete的React组件

    一个React组件,用于为Google Maps Places Autocomplete构建自定义的UI 演示版 现场演示: 产品特点 使您能够轻松构建由提供支持的自定义自动完成下拉列表 使用进行地理编码并获取经纬度的 完全控制渲染以与其他库...

    vue-google-autocomplete:Google Places API的Vue.js自动建议组件

    Google Maps Places API的Vue.js(2.x)自动建议组件。 演示版 现场演示: 好处 我曾尝试使用其他Vue Google自动完成组件,但没有找到能满足我需要的组件。 因此,在下面我想提一下您可以从这个确切的组件中得到...

    use-places-autocomplete:在Google Maps Places Autocomplete中使用React钩子

    使用场所-自动完成 这是的React,可帮助您轻松构建具有 autocomplete功能的UI组件! 通过利用,您可以为用户与搜索栏或表单等的交互提供出色的UX(用户体验)。希望大家喜欢。 :red_heart: 它? :star: 可以在或上...

    Google Suggest,jquery autocomplete,自动完成示例

    结合描述中的博客链接,我们可以推断这篇博客可能详细介绍了如何将Google Suggest的原理应用到jQuery Autocomplete插件中,为用户提供类似谷歌搜索那样的自动完成体验。博客作者可能分享了实现这一功能的步骤、代码...

    谷歌地图定位、搜索与获得点击位置坐标

    对于地图的搜索功能,我们可以利用`google.maps.places.Autocomplete`对象来实现。创建一个输入框,然后将其关联到自动完成组件: ```html 搜索地点"&gt; ``` ```javascript var searchInput = document....

    autocomplete, jQuery自动完成插件,如Google自动完成.zip

    autocomplete, jQuery自动完成插件,如Google自动完成 电子邮件自动完成文档&演示插件jQuery自动完成插件如谷歌搜索 npm install jquery-autocomplete

    layui自动填充插件autocomplete.rar

    在layui中,"autocomplete"是一款自动填充插件,常用于输入框,提供智能提示功能,提高用户输入效率。这款插件适用于各种需要自动补全场景,如搜索框、表单填写等。 在layui的autocomplete插件中,主要涉及以下知识...

    自动完成功能(AutoComplete) EXT+asp.net

    在IT行业中,自动完成功能(AutoComplete)是一种常见的用户体验优化技术,广泛应用于搜索框、输入字段等场景,能够根据用户输入的字符实时提供可能的匹配选项,提高输入效率。本示例着重介绍如何利用EXT库和ASP.NET...

    react-native-google-places-autocomplete:适用于iOS和Android React-Native应用程序的可自定义Google Places自动完成组件

    适用于iOS和Android React-Native应用程序的可自定义Google地方信息自动完成组件 该库的版本2现在可用。 在 部分中查看更多信息。 预览 安装 步骤1。 npm install react-native-google-places-autocomplete --save...

    自动完成 autocomplete 两个例子

    在IT行业中,自动完成(Autocomplete)是一种常见且实用的功能,尤其在开发环境中,它可以显著提高程序员的工作效率。本文将详细探讨自动完成功能,并通过Eclipse开发环境中的两个实例来展示其工作原理和实现方法。 ...

    针对 Google Places API 的 Vue.js 自动建议组件 .zip

    Vue Google 自动完成 适用于 Google Maps Places API 的 Vue.js (2.x) 自动建议组件。演示现场演示olefirenko.github.io/vue-google-autocomplete好处我尝试过使用不同的 Vue Google Autocomplete 组件,但没有找到...

    jQuery自动完成插件autocomplete.zip

    在标题"jQuery自动完成插件autocomplete.zip"中,我们了解到这是一个基于jQuery库的插件,主要功能是实现自动完成效果。描述中提到的zip文件包含的是该插件的核心组件。 jQuery库是JavaScript的一个轻量级框架,它...

    mui-places-autocomplete:使用Google Maps Places自动完成功能的Google Material Design(Material-UI)样式化的React组件

    ) 经过全面测试安装要安装此组件,请运行以下命令: yarn add mui-places-autocomplete --ignore-scripts要么npm install mui-places-autocomplete --save --ignore-scripts请注意,如果在安装软件包时排除了--...

    asp.net仿百度的自动完成(autoComplete) jquery+autocomplete.js

    asp.net仿百度的自动完成(autoComplete) 使用Jquery autocomplete.js插件来完成自动完成,可以从数据库中读取数据 ajax异步显示数据!云计算QQ研究群:96191559

    jquery自动完成表插件Autocomplete Table

    Autocomplete Table是一个jQuery插件,提供自动完成下拉的多列表,(下拉)字段列表。浏览器要求ie9以上版本,演示地址:http://www.jq22.com/jquery-info529

    google-autocomplete, Google自动完成 Vue.zip

    google-autocomplete, Google自动完成 Vue Google自动完成 因为我被复杂的例子淹没了,所以我正在共享这个简单的任务。 所以,我将尽量在解释过程中尽量简单。Google Autocomplete组件不只是Google官方API的一个 Vue...

    jquery 自动完成 Autocomplete

    **jQuery自动完成(Autocomplete)** jQuery的自动完成插件是一种强大的交互功能,它允许用户在输入文本时根据已有的数据集快速选择合适的选项。这个功能常见于搜索框、表单填充等场景,极大地提高了用户体验。在本篇...

    google map v3,V3地图搜素,V3地图标注

    在本文中,我们将深入探讨Google Maps API的第三版(V3),主要关注V3地图搜索、地图标注以及多点标注的实现。Google Maps API V3是Google提供的一个强大的JavaScript库,用于在网页上嵌入交互式地图,进行地理位置...

    ajax控件自动完成(AutoComplete)

    **Ajax控件自动完成(AutoComplete)** Ajax控件自动完成是一种常见的前端技术,它显著提高了用户在网页上的交互体验,特别是在输入数据时。在网页的搜索框或用户登录界面,这种技术尤其有用,因为它能预测并显示...

    autocomplete(自动完成)

    在开发过程中,有很多优秀的开源工具可以帮助我们实现自动完成功能,如JavaScript库Autocomplete.js、Typeahead.js等,它们提供了丰富的配置选项和插件支持,便于集成到各种项目中。 综上所述,自动完成技术是通过...

Global site tag (gtag.js) - Google Analytics