多个 Google 自动完成和地点搜索问题

2024-02-20

我需要一些有关 Google 地图 API 以及使用自动完成和地址完成的帮助。

这是目前我的代码:

JS

function fillInAddress(show) {
                    console.log(show);
                    var place = autocomplete.getPlace();
                    for (var i = 0; i < place.address_components.length; i++){
                        var base = place.address_components[i].types[0];
                        if(base === "postal_code"){
                            console.log(place.address_components[i].long_name);
                        }
                    }
                }

function initialize(out) {
            autocomplete = new google.maps.places.Autocomplete(
                    (document.getElementById(out)),
                    {types: ['geocode']});
            google.maps.event.addListener(autocomplete, 'place_changed', function () {
                fillInAddress(out);
            });
        }
        initialize("from");
        initialize("to");

HTML

<input type="text" id="from" class="location">
<input type="text" id="to" class="location">
<input id="fromPc" type="text">
<input id="toPc" type="text">

地点下拉菜单运行良好,您可以输入内容,然后会提出很好的建议。

但是,当我单击来自输入中的建议之一时,我在控制台中收到此错误。

Uncaught TypeError: Cannot read property 'address_components' of undefined

但是当我在“收件人”输入框中执行此操作时,它工作正常并返回邮政编码。

如果我然后返回到第一个输入“from”,然后再次输入地址,这次它会返回邮政编码,但它会从第二个输入“to”返回邮政编码。

有谁知道如何解决这个问题。

我提前感谢您的帮助!


您正在覆盖(全局)变量autocomplete inside initialize.

将变量设置为局部变量initialize并将其作为参数传递给fillInAddress

function fillInAddress(show,ac) {

                    var place = ac.getPlace();
                    for (var i = 0; i < place.address_components.length; i++){
                        var base = place.address_components[i].types[0];
                        if(base === "postal_code"){
                            document.getElementById(show+'Pc').value
                              = place.address_components[i].long_name;
                              return;
                        }
                    }
                }

function initialize(out) {
           var  autocomplete = new google.maps.places.Autocomplete(
                    (document.getElementById(out)),
                    {types: ['geocode']});

            google.maps.event.addListener(autocomplete, 'place_changed', 
               function () {
                document.getElementById(out+'Pc').value='';
                fillInAddress(out,autocomplete);
            });
        }
initialize("from");
initialize("to");
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

多个 Google 自动完成和地点搜索问题 的相关文章

随机推荐

  • jQuery 错误? .appendTo() 在 IE7 中不起作用

    我正在尝试为 jQuery 创建一个选项传输插件 我可以在 Opera Firefox Chrome 和 Safari 中使用基本功能 但 IE7 无法配合 IE7 中的传递函数的运行似乎非常零散且难以理解 我创造了一个示例页面来说明我的问
  • Three.JS - 粒子沿随机方向绕点运行形成球体

    我有一个粒子系统 其中所有粒子都位于相同的坐标处 并且在随机方向上一个接一个地 它们 应该 开始绕场景中心运行 形成一个球体 到目前为止 我成功实现的是一组 Vector3 对象 粒子 它们一个接一个地开始沿着 Z 轴绕中心运行 只需根据当
  • 将 bigint 转换为日期时间

    我想将一个值从 bigint 转换为 datetime 例如 我正在阅读HISTORY表的团队城市服务器 在场上构建启动时间服务器 我在一条记录 1283174502729 上有这个值 如何将其转换为日期时间值 这对你有用吗 它在 SQL
  • xsl string-join() 多个变量 - 仅使用非空

    我想创建几个 xsl variable 它们可能为空 也可能不为空 然后加入它们
  • BigQuery 中有自动增量吗?

    BigQuery 中是否有 AUTO INCRMENT SERIAL IDENTITY 或序列之类的内容 我知道 ROW NUMBERhttps cloud google com bigquery query reference row n
  • 如何快速检查是否使用 Perl 安装了 Linux `unzip`?

    如何快速检查是否是Linuxunzip是使用 Perl 安装的吗 which unzip 如果有输出 则它指向解压缩的位置 如果没有输出 则不会显示任何内容 这依赖于解压缩在您的路径上
  • UISegmentedControl setSelectedSegmentIndex:没有 valueChanged 操作

    我正在通过代码设置 UISegmentedControl 的 selectedSegmentIndex 每当我这样做时 就会调用 valueChanged 操作 这对我来说听起来很合乎逻辑 但是有没有办法在不调用操作的情况下设置选定的段 它
  • Powershell 更新失败

    当我跑步时Update Help它在 Powershell 中失败 我不通过代理 这是直接访问 我还以管理员身份运行 Powershell 我不知道还要检查什么 欢迎任何建议 这是我的版本 PSVersionTable Name Value
  • 如何确定 Windows/IIS 上的文件编码?

    从答案到这个问题 https stackoverflow com questions 2453647 why are accented characters rendering inconsistently when accessing t
  • 我如何显示提交做了什么?

    我知道的一个愚蠢的方法是 git diff commit number1 commit number2 有没有更好的办法 我的意思是 我想知道 commit1 本身 我不想在它之前添加 commit2 作为参数 git show
  • 将 WPF 控件设置为扩展以填充可用空间,仅此而已

    如何设置 WPF 控件来填充其父级容器中的可用空间 但不展开父级 以下代码片段描述了我正在尝试的布局 我想要Grid伸展以适应Expander 我想要ListBox只为了填补Grid 我想要ListBox的滚动条出现时Grid太小 无法显示
  • 如何在 Airflow 2.x 中将 XComArg 转换为字符串值?

    Code from airflow models import BaseOperator from airflow utils decorators import apply defaults from airflow providers
  • 逻辑:tr_rev_ Correct 的辅助引理

    在逻辑章节中 介绍了反向列表函数的尾递归版本 我们需要证明它可以正确工作 Fixpoint rev append X l1 l2 list X list X match l1 with gt l2 x l1 gt rev append l1
  • .NET Compact Framework 3.5 上是否提供像 AutoMapper 这样的映射库?

    是否有人在研究 AutoMapper 的 NET Compact Framework 端口 或者是否有任何类似的 NET Compact Framework 映射库 你可以建立在奥姆地图绘制器 https stackoverflow com
  • 如何删除 Scrapy Spider 数据中的空白

    我正在用 Scrapy 编写我的第一个蜘蛛并尝试遵循文档 我已经实现了 ItemLoaders 蜘蛛提取数据 但数据包含许多行返回 我尝试了很多方法来删除它们 但似乎没有任何效果 Replace escape chars 实用程序应该可以工
  • BigInteger 时间最优化的乘法

    你好 我想以最及时的优化方式乘以 2 个大整数 我目前正在使用 karatsuba 算法 任何人都可以建议更优化的方法或算法来做到这一点 Thanks public static BigInteger karatsuba BigIntege
  • Google Cloud Natural Language API 的 IAM 角色

    我想将 Google Cloud Natural Language API 与其 Node js 库一起使用 对于身份验证 我使用建议的服务帐户docs https cloud google com natural language doc
  • prepend 和appendchild 之间的区别

    我在列表中插入了一个新行 这是我的代码 function newToDo var newTODoList document getElementById toDoListInput var newLine document createEl
  • 更改 Django 视图中的时间格式

    importdatetime in my Django 视图以节省时间database and now datetime datetime now 当我saving它在数据库中的价值returns就像是 2013 04 28 22 54 3
  • 多个 Google 自动完成和地点搜索问题

    我需要一些有关 Google 地图 API 以及使用自动完成和地址完成的帮助 这是目前我的代码 JS function fillInAddress show console log show var place autocomplete g