Loading [MathJax]/jax/output/CommonHTML/config.js
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >问答首页 >使用Google Maps的地址验证器

使用Google Maps的地址验证器
EN

Stack Overflow用户
提问于 2013-05-02 04:07:56
回答 1查看 1.9K关注 0票数 3

我正在使用google maps.my UI创建一个地址验证器web应用程序:

]

现在我想要的是在按下确定按钮后,地址应该显示在你的地址类似字段中,就像这个701年,Sunnywale,CA 94089现在我的确定按钮点击事件是

但是当我用我的程序添加javascript来调用google地图时,它就不能正常工作了,尽管出现了一个错误,比如示例图片。请帮帮我。确定按钮:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="OK" 
            Width="62px" style="margin-left: 0px" />

验证并查找我的按钮代码:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<asp:Button ID="Submit" runat="server" style="margin-left: 97px" Text="Validate &amp; Locate Me" Width="137px" />

现在jQuery和地理编码部分:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
<script type="text/javascript">
    // The following code show execute only after the page is fully loaded
    $(document).ready(function () {
        if ($('#MyForm').exists()) {

            // Enable jQuery Validation for the form
            $("#MyForm").validate({ onkeyup: false });

            // Add validation rules to the FullAddress field
            $("#FullAddress").rules("add", {
                fulladdress: true,
                required: true,
                messages: {
                    fulladdress: "Google cannot locate this address."
                }
            });

            // This function will be executed when the form is submitted
            function FormSubmit() {
                $.submitForm = true;
                if (!$('#MyForm').valid()) {
                    return false;
                } else {
                    if ($("#FullAddress").data("IsChecking") == true) {
                        $("#FullAddress").data("SubmitForm", true);
                        return false;
                    }

                    alert('Form Valid!  Submit!');
                    // return true;   // Uncomment to submit the form.
                    return false;     // Supress the form submission for test purpose.

                }
            }

            // Attach the FormSubmit function to the Submit button
            if ($('#Submit').exists()) {
                $("#Submit").click(FormSubmit);
            }

            // Execute the ForumSubmit function when the form is submitted
            $('#MyForm').submit(FormSubmit);
        }
    });

    // Create a jQuery exists method
    jQuery.fn.exists = function () { return jQuery(this).length > 0; }

    // Position the Google Map
    function Map(elementId, geolocation) {
        var myOptions = {
            zoom: 13,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        }
        var map = new google.maps.Map(document.getElementById(elementId), myOptions);
        map.setCenter(geolocation);
    }

    // FullAddress jQuery Validator
    function FullAddressValidator(value, element, paras) {

        // Convert the value variable into something a bit more descriptive
        var CurrentAddress = value;

        // If the address is blank, then this is for the required validator to deal with.
        if (value.length == 0) {
            return true;
        }

        // If we've already validated this address, then just return the previous result
        if ($(element).data("LastAddressValidated") == CurrentAddress) {
            return $(element).data("IsValid");
        }

        // We have a new address to validate, set the IsChecking flag to true and set the LastAddressValidated to the CurrentAddress
        $(element).data("IsChecking", true);
        $(element).data("LastAddressValidated", CurrentAddress);

        // Google Maps doesn't like line-breaks, remove them
        CurrentAddress = CurrentAddress.replace(/\n/g, "");

        // Create a new Google geocoder
        var geocoder = new google.maps.Geocoder();
        geocoder.geocode({ 'address': CurrentAddress }, function (results, status) {

            // The code below only gets run after a successful Google service call has completed.
            // Because this is an asynchronous call, the validator has already returned a 'true' result
            // to supress an error message and then cancelled the form submission.  The code below
            // needs to fetch the true validation from the Google service and then re-execute the
            // jQuery form validator to display the error message.  Futhermore, if the form was
            // being submitted, the code below needs to resume that submit.

            // Google reported a valid geocoded address
            if (status == google.maps.GeocoderStatus.OK) {

                // Get the formatted Google result
                var address = results[0].formatted_address;

                // Count the commas in the fomatted address.
                // This doesn't look great, but it helps us understand how specific the geocoded address
                // is.  For example, "CA" will geocde to "California, USA".
                numCommas = address.match(/,/g).length;

                // A full street address will have at least 3 commas.  Alternate techniques involve
                // fetching the address_components returned by Google Maps.  That code looks even more ugly.
                if (numCommas >= 3) {

                    // Replace the first comma found with a line-break
                    address = address.replace(/, /, "\n");

                    // Remove USA from the address (remove this, if this is important to you)
                    address = address.replace(/, USA$/, "");

                    // Check for the map_canvas, if it exists then position the Google Map
                    if ($("#map_canvas").exists()) {
                        $("#map_canvas").show();
                        Map("map_canvas", results[0].geometry.location);
                    }

                    // Set the textarea value to the geocoded address
                    $(element).val(address);

                    // Cache this latest result
                    $(element).data("LastAddressValidated", address);

                    // We have a valid geocoded address
                    $(element).data("IsValid", true);
                } else {
                    // Google Maps was able to geocode the address, but it wasn't specific
                    // enough (not enough commas) to be a valid street address.
                    $(element).data("IsValid", false);
                }

                // Otherwise the address is invalid
            } else {
                $(element).data("IsValid", false);
            }

            // We're no longer in the midst of validating
            $(element).data("IsChecking", false);

            // Get the parent form element for this address field
            var form = $(element).parents('form:first');

            // This code is being run after the validation for this field,
            // if the form was being submitted before this validtor was
            // called then we need to re-submit the form.
            if ($(element).data("SubmitForm") == true) {
                form.submit();
            } else {
                // Re-validate this property so we can return the result.
                form.validate().element(element);
            }
        });

        // The FullAddress validator always returns 'true' when initially called.
        // The true result will be return later by the geocode function (above)
        return true;
    }

    // Define a new jQuery Validator method
    $.validator.addMethod("fulladdress", FullAddressValidator);
</script>

    </body>
    </html>

请帮助后,按下确定按钮,完整的地址不会显示到您的地址看起来像它的field.Instead通过一条消息:此字段是必需的。如果需要更多细节,请提出来

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2013-05-10 09:04:26

第一个将有地址字段和OK按钮。

应该能行得通。否则,您需要分配类并将控件分组为2个集合。

我所说的2组的意思是“确定”按钮应该验证它上面的字段。和“验证和定位我”按钮应该只验证“您的地址看起来像”文本框。使用jquery,您可以想出许多方法来对控件进行分组和验证。

如果这不能解决问题,请提供超文本标记语言或使用http://jsfiddle.net/

编辑-- --

您遇到的问题是,当您按下OK时,它会验证它下面的一个字段。现在我感觉你已经使用了一个没有任何分组的必填字段验证器。请指定一个ValidationGroup属性来分隔“确定”按钮和“验证并定位我”按钮的验证条件。如果您不知道如何使用ValidationGroup,请让我知道。

~ CJ

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/16330184

复制
相关文章
Google Maps JSAPI V3
    1. 不再需要API Key 2. 指定sensor传感器参数,检测到用户当前位置 3. 针对移动设备(IPhone设备和Android系统)的开发 4. 支持本地化 5. 版本管理
py3study
2020/01/08
1.1K0
google maps api_js调用谷歌浏览器接口
1. 使用谷歌地图 API 的第一步就是要注册一个 API 密钥,需要注重一下两点:
全栈程序员站长
2022/09/20
5.7K0
与朋友分享你的位置-Google Maps with Latitude
    对于Windows Mobile平台设备的实时定位及相关服务,微软有其杀手级的Live Search Mobile(具体可以参考马宁老师的webcast:Windows Embedded CE 导航与地图平台介绍);谷歌也有Google Maps for Windows Mobile,目前推出了新的版本,只要你有google账户,就可以和其他朋友分享你的位置了。     我们可以直接在设备浏览器上去Google Maps for Windows Mobile下载并安装其应用程序。首先,我尝试了
ShiJiong
2018/01/11
1.3K0
与朋友分享你的位置-Google Maps with Latitude
springbooot使用google验证码
由于需要做一个前后端分离的项目,想着使用google验证码,由于年龄大了,这些知识啊,用完就忘,在这里记录一下。
魚迹
2023/05/06
4300
springbooot使用google验证码
免费google代理服务器_google服务器ip地址
有些朋友在登陆谷歌时遇到异常活动而出验证,但是无论怎么输入手机号谷歌都提示此手机号无法用于验证,这种问题大多人都会出现,滥用代理基本都会出现异常验证活动的.
全栈程序员站长
2022/11/11
14.5K0
免费google代理服务器_google服务器ip地址
国内使用Google reCaptcha验证码
为啥我出这篇文章呢,因为我有几天用了vaptcha进行人机验证,还算好用,但是发现手机上有广告,本着原则问题,我剔除了人机验证。 又发现在邻居@kidultff发现谷歌国内验证也可以,于是探路V3版本
一朵灼灼华
2022/08/05
4.2K0
国内使用Google reCaptcha验证码
使用Numpy验证Google GRE的随机选择算法
最近在读《SRE Google运维解密》第20章提到数据中心内部服务器的负载均衡方法,文章对比了几种负载均衡的算法,其中随机选择算法,非常适合用 Numpy 模拟并且用 Matplotlib 画图,下面是我的代码:
大江小浪
2018/07/24
8510
使用Numpy验证Google GRE的随机选择算法
[AI新知] Android版Google Maps开始支援无痕模式
Google宣称Maps用户启用无痕模式后,Google不会储存浏览/搜寻纪录以及传送通知,另一方面,由于系统不会取得位置纪录/地点资讯,用户也就无法获得个人化地图服务
阿泽
2019/11/12
5190
ASP.NET Core 使用 Google 验证码(Google reCAPTCHA)
验证码在我们实际的生活场景中非常常见,可以防止恶意破解密码、刷票、论坛灌水、刷注册等等。现在的网站基本都有使用验证码来对用户的行为进行验证。从简单的文字验证码、图片验证码、滑动验证码、图片选择验证码等,验证码一直在进化,在和“黑恶势力”做斗争。Google 验证码是 Google 提供的一项免费的验证码服务,接入非常简单,推荐用它来替换传统的图片验证码。
晓晨
2019/04/23
2.6K0
ASP.NET Core  使用 Google 验证码(Google reCAPTCHA)
使用机器学习和Google Maps对交通事故风险进行实时预测
Traffic事故是非常普遍的。如果生活在一个广阔的大都市中,那么很有可能听说,见证甚至参与其中。由于交通事故的发生频率,交通事故是造成全球死亡的主要原因,每年缩短数百万人的生命。因此,可以预测交通事故或容易发生事故的区域的系统可以潜在地挽救生命。
代码医生工作室
2019/10/15
3.6K1
使用机器学习和Google Maps对交通事故风险进行实时预测
maps
通过向 make 函数传入键和值的类型,可以创建 map。make(map[type of key]type of value) 是创建 map 的语法。
酷走天涯
2019/06/11
5580
网站如何使用Google两步验证
谷歌两步验证是Google的一种开源技术,给网站提供额外的保护,每次登录账户时,在登录后需要输入Google Authenticator给你生成的6位验证码。
Petrochor
2022/06/07
3K0
网站如何使用Google两步验证
基于python+PyQt5的Google身份验证器
1.本文学习nanhuier的博客《Python计算谷歌身份验证器的验证码》并优化其中代码。 原博客链接:https://blog.csdn.net/nanhuier/article/details/77679200 2.本文学习莫水千流的博客《程序员之路:python3+PyQt5+pycharm桌面GUI开发》, 成功搭建PyQt5+Pycharm的开发环境,建议读者先按照此文配置好环境。 原博客链接:https://www.cnblogs.com/zhoug2020/p/9039993.html 3.本文学习maicss的github工程《PyQt5-Chinese-tutorial》 github链接:https://github.com/maicss/PyQt5-Chinese-tutorial 4.本文学习晴空行的博客《Python打包方法》, 原博客链接:https://www.cnblogs.com/gopythoner/p/6337543.html
潇洒坤
2019/03/06
1.4K0
SpringMVC表单验证器的使用
本章讲解SpringMVC中怎么通过注解对表单参数进行验证。 SpringBoot配置 使用springboot, spring-boot-starter-web会自动引入 hiberante-validator, validation-api依赖。 在 WebMvcConfigurerAdapter实现类里面添加验证器及国际化指定资源文件。 @Override public Validator getValidator() { LocalValidatorFactoryBean validat
Java技术栈
2018/03/30
1.8K0
SpringMVC表单验证器的使用
PHP设置谷歌验证器(Google Authenticator)实现操作二步验证
**使用说明:**开启Google的登陆二步验证(即Google Authenticator服务)后用户登陆时需要输入额外由手机客户端生成的一次性密码。实现Google Authenticator功能需要服务器端和客户端的支持。服务器端负责密钥的生成、验证一次性密码是否正确。客户端记录密钥后生成一次性密码。
OwenZhang
2021/12/08
4.5K0
PHP设置谷歌验证器(Google Authenticator)实现操作二步验证
通过Google身份验证器加强Linux帐户安全
而后,google的验证模块就会被复制到/lib64/security目录下,而用来生成密钥的可执行程序:google-authenticator,则复制到/usr/local/bin目录下,方便调用。
流柯
2018/08/30
8530
TP6验证器的使用
4手机号码:不能为空,不能少于11个字符,不能多于11个字符,必须是数字,必须是可用的手机号码
叫我可儿呀
2019/12/05
1.8K0
如何使用 Python 验证电子邮件地址
在本文中,我将向大家展示如何使用名为 verify-email 的 Python 库构建你自己的电子邮件验证工具。
海拥
2023/02/27
2.7K0
如何使用 Python 验证电子邮件地址
两步验证杀手锏:Java 接入 Google 身份验证器实战
大家应该对两步验证都熟悉吧?如苹果有自带的两步验证策略,防止用户账号密码被盗而锁定手机进行敲诈,这种例子屡见不鲜,所以苹果都建议大家开启两步验证的。
Java技术栈
2018/09/29
5.3K0
TP6.0中的密码验证逻辑、验证器的使用
站长源码网 1. 场景一:只有一个密码框,并且是可选项,留空不修改密码,不留空则修改密码 2. 场景二:两个密码框,修改密码时有新密码、确认密码,新密码框不为空时,确认密码才验证 1. 场景一:只有一个密码框,并且是可选项,留空不修改密码,不留空则修改密码 ---- 编辑用户表单 <form action="" method="post"> 用户名 <input type="text" name="username" value="liang" readonly autocomplete="off"
很酷的站长
2023/02/17
1.7K0
TP6.0中的密码验证逻辑、验证器的使用

相似问题

通过Google Maps API进行地址验证

15

Google Maps地址列表

32

使用google maps onload显示地址位置

10

使用google maps javascript API搜索地址

14

google maps ip地址问题

23
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文