多个 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 自动完成和地点搜索问题 的相关文章

  • Javascript:通过将路径作为字符串传递给对象来获取对象的深层值[重复]

    这个问题在这里已经有答案了 可能的重复 使用字符串键访问嵌套的 JavaScript 对象 https stackoverflow com questions 6491463 accessing nested javascript obje
  • Famo.us 滚动视图高度

    我正在尝试使用著名的顺序布局在滚动视图下方添加图像 但滚动视图的高度有问题 这就是我创建滚动视图的方式 var scrollview new Scrollview direction Utility Direction X options
  • jspm / jQuery / TypeScript - 模块“jquery”没有默认导出

    我正在尝试使用 TypeScript 和 jspm system js 来引导 Web 应用程序进行模块加载 我还没有走多远 安装 jspm 后 并使用它来安装 jQuery jspm install jquery 以及基础知识 main
  • Android SHA1 发布密钥库无法与 Google 地图配合使用

    我正在使用 Google Maps Android API 但遇到了一些问题 我正在使用 android studio 签署我的 apk 在 android keystore jks 创建一个 另外 我选择 发布 作为其中的类型 我已经使用
  • 使用 AJAX 获取发布数据

    我正在尝试从 Wordpress 帖子 AJAX 中提取内容 我已经在下面列出了迄今为止我的努力 加载的脚本 wp enqueue script my ajax request get stylesheet directory uri js
  • 大型应用的回流/布局性能

    我正在使用 GWT 构建一个 HTML 应用程序 其性能总体上是正确的 有时 它会加载 DOM 中的许多对象 并且应用程序会变得很慢 我使用 Chrome 开发者工具分析器来查看时间花在哪里 在 Chrome 下 一旦应用程序被编译 即没有
  • Promise 构造函数回调的主体何时执行?

    假设我有以下代码构造一个Promise function doSomethingAsynchronous return new Promise resolve gt const result doSomeWork setTimeout gt
  • javascript/jquery 禁用点击提交按钮,防止重复提交

    所以我的提交按钮如下所示 a href img src images user create product png border 0 a 当我双击它时 显然会双重提交 问题是 我将信息保存在数据库中 因此那里会有重复的信息 我不想那样 这

  • 有多少像素? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 一个有多少像素 br 标签添加 我知道 br 高度可以通过CSS控制line height财产 不同浏览器的值是否相同 它会添加与浏览
  • 不可见的 reCAPTCHA - 缺少必需的参数:sitekey

    我正在为每个带有具有类的按钮的表单动态加载不可见的 reCAPTCHAg recaptcha 我遇到的问题是验证码未正确加载 我不知道为什么 我按照验证码网站上的文档进行操作 但我不确定如何以及为什么会出现此错误 Uncaught Erro
  • d3力定向布局-链接距离优先

    在 d3 中使用力导向布局 如何使链接距离成为优先事项 同时仍然保持良好的图形布局 如果我指定动态链接距离 但保留默认费用 则我的图形距离会因费用函数而发生一些变形 并且不再是准确的距离 但是 如果我删除电荷 图表将如下所示 任何建议表示赞
  • 当选项卡重新加载(chrome 扩展)时,如何运行此脚本?

    所以我想在指定 URL 中重新加载选项卡时运行脚本 它几乎可以工作 但实际上 id 不能 这是我的清单文件 manifest version 2 name Sample Extension description Sample Chrome
  • 在 jQuery DataTables 中的 Ajax 请求后在 td 中添加 html 元素

    我想在获得 ajax 响应后在 td 中添加 html 元素 结果将是这样的 tr td class mycus class span class mycus class2 XYZ span td td class mycus class
  • tr 元素周围的边框不显示?

    Chrome Firefox 似乎不渲染边框tr 但如果选择器是 它会渲染边框table tr td 如何在 tr 上设置边框 我的尝试 不起作用 table tr border 1px solid black table tbody tr
  • ES6 Reflect API 的好处

    我一直在努力升级一些代码以使用 ES6 语法 我有以下代码行 delete this foo 我的 linter 提出了使用建议 Reflect deleteProperty this foo 您可以找到该方法的文档here https d
  • 角度 ng-repeat 根据条件添加样式

    我在 div 列表上使用 ng repeat 并且在渲染此 div 的 json 中手动添加项目 我需要定位我在 json 中添加的最后一个 div 它会自动在屏幕上渲染 即 couse 光标所在的位置 其余部分保持在相同位置 但没有给出渲
  • 指定在任何 Jest 设置发生之前运行的代码

    tl dr 是 1 我怎样才能让Jest使用原生的require函数可以在任何地方加载我的测试中的所有模块 2 我将在哪里 如何进行修改 即替换为esm加载程序 https github com standard things esm ht
  • 背景大小:封面在视网膜显示屏上看起来像素化

    可以看到我正在开发的网站here http ourcityourstory com dev 如果你查看 iPad 3 或 iPhone 4 上的 关于 或 联系 部分 背景看起来全都是疯狂的像素化 我有background size set
  • 将 Angular Web 组件 EventEmitter 监听到 javascript

    我在以下工具的帮助下创建了一个小型网络组件本文 https medium com IMM9O web components with angular d0205c9db08f使用角度元素 其中包括 Input and Output 我能够将
  • R闪亮:使用闪亮的JS从数据表中获取信息

    我想读出所有列名称以及它们在数据表中显示的顺序 由于不同的原因 我无法使用 stateSave 等选项 我对 JS 没有什么把握 但我确信用它可以完成 所以我需要你帮助我 我尝试过类似的代码片段 datatable data callbac

随机推荐

  • 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