Google Maps API - 数组和 InfoWindows 的问题

2024-02-20

抱歉,如果这是微不足道的,但我是 JS 的新手,并且已经解决这个问题几个小时但无济于事。

function initialize() {
    geocoder = new google.maps.Geocoder();
    var latlng = new google.maps.LatLng(-34.397, 150.644);
    var myOptions = {
    zoom: 12,
    center: latlng,
    mapTypeId: google.maps.MapTypeId.ROADMAP
    }
    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}

var markersArray = [];
var infowindowArray = [];

function addMarker(location) {
    marker = new google.maps.Marker({
    position: location,
    map: map
    });
    markersArray.push(marker);
}

function addInfowindow(string) {
    infowindow = new google.maps.InfoWindow({content: string});
    infowindowArray.push(infowindow);
}

function findvenues(latitudelongitude) {
$.get("venuefinder.php", { latlong:latitudelongitude.Ka+","+latitudelongitude.La }, function(data){
    var myObject = eval('(' + data + ')');
    for(x in myObject.response.venues){
        var latlonglocation = new google.maps.LatLng(myObject.response.venues[x].location.lat,myObject.response.venues[x].location.lng);
        addMarker(latlonglocation);
        addInfowindow(myObject.response.venues[x].name);
        google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});
        console.log(markersArray[x],infowindowArray[x]);
    }
});

调用 findvenues 时,应添加 infowindow 单击事件。当我单击图标时,信息窗口数组中最后一个元素的相同信息窗口始终打开。

但是,如果我手动输入以下代码,它就会起作用:

google.maps.event.addListener(markersArray[0], 'click', function() {infowindowArray[0].open(map,markersArray[0]);});
google.maps.event.addListener(markersArray[1], 'click', function() {infowindowArray[1].open(map,markersArray[1]);});

但我需要它是动态的......我做错了什么?如果问题不清楚,请告诉我,我会尽力澄清。


将该调用更改为循环中的“addListener”:

      google.maps.event.addListener(markersArray[x], 'click', function() {infowindowArray[x].open(map,markersArray[x]);});

to this:

      google.maps.event.addListener(markersArray[x], 'click', (function(x) {
        return function() {
          infowindowArray[x].open(map,markersArray[x]);
        }
      })(x));

通过介绍another像这样的函数,你创建了一个全新的范围。这会“冻结”您传入的“x”的值,以便返回的函数(换句话说,将传入 Google API 的实际处理函数)可以访问其自己的“x”,与在该循环中建立的所有其他处理程序。

如果你不这样做,那么所有的处理程序share完全相同的小“x”,这显然是不行的。

edit——还有其他方法可以做到这一点。你可以将这个额外的函数写成一个完全独立的东西:

function makeMapListener(window, map, markers) {
  return function() { window.open(map, markers); };
}

那么循环中的语句将如下所示:

google.maps.event.addListener(markersArray[x], 'click', makeMapListener(inforwindowArray[x], map, markersArray[x]));

它的重要部分是在构造处理函数之前创建循环期间更改的变量的副本。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Google Maps API - 数组和 InfoWindows 的问题 的相关文章

随机推荐

  • JavaScript:那个与这个

    我试图更好地理解 JavaScript 中 that 和 this 的用法 我在这里关注 Douglas Crockford 的教程 http javascript crockford com private html http javas
  • 按行拆分数据框并另存为 csv

    我只有一个数据框 想要按行分割数据框 将几个新数据框分配给新变量并将它们保存为 csv 文件 a lt rep 1 5 each 3 b lt rep 1 3 each 5 c lt data frame a b a b 1 1 1 2 1
  • 将 zip 文件解压到本地文件夹

    我有带有 Express 的节点应用程序 我从邮递员等客户端发送请求 我需要从req并将其解压到我的本地文件夹中 我该怎么做 我找到了以下开源但不知道如何获取req body并将其提取到我的本地文件夹中 例如 C Test extractD
  • Selenium WebDriver + Tor 作为 Stem 的代理?

    我需要确认是否可以使用 Stem 启动公开 127 0 0 1 port 的 Tor 进程 然后在 selenium 脚本上使用它作为代理 SOCKS 我正在使用 Python 3 4 2 Stem 1 3 0 和 Tor tor win3
  • 如何在 IPython jupyter 笔记本中传递命令行参数

    我是 Ipython 的新手 目前我已经使用 Anaconda 安装了 Ipython 并编写了使用 jupyter Notebook UI 绘制图表的代码 我想在 argparse 模块的帮助下将一些参数传递给我的工作脚本 下面是代码 i
  • 从 Python AST 生成 .pyc?

    如何从 Python AST 生成 pyc 文件以便可以从 Python 导入该文件 我用过compile创建一个代码对象 然后编写co code属性到文件 但是当我尝试从 Python 导入文件时 我得到一个ImportError Bad
  • 对元素进行随机排列,使得任何元素都不应出现在其原始索引处

    我有一个对象元素列表 SourceList ResultList Expected Obj A Obj F Obj B Obj C Obj C Obj G Obj D Obj B Obj E Obj A Obj F Obj B Obj G
  • 我们如何让 DynamicData 与 EFPocoAdapter 一起工作?

    我的团队希望使用 EFPocoAdapter 但也希望使用 DynamicData 工具 但遇到了一些问题 我们基本上将 动态数据实体 Web 应用程序 项目添加到 EFPocoAdapter Northwind 示例解决方案 我使用的是最
  • 当我尝试在 Windows Server 2008 中安装 64 位 mongodb 时,出现“访问被拒绝”的情况

    我所做的就是运行下面的脚本 D Tools MongoDb bin mongod exe dbpath D MongoDb data 然后我得到了例外 连接到服务控制管理中心时出错 访问被拒绝 5 我使用管理员帐户来操作此操作 我已经创建了
  • needDisplayForKey/actionForKey 覆盖是否正常工作?

    我正在尝试将一些在 Objective C 中运行的代码转换为 Swift 我遇到的问题是 needsDisplayForKey actionForKey 没有以相同的方式被调用 据我所知 自定义键值未正确传递 这是我调试时得到的结果 默认
  • 讲解Tkinter文本搜索方法

    我不太明白 text search 方法是如何工作的 比如有一句话 Today a red car appeared in the park 我需要找到a red car序列并突出显示它 它已找到 但我的突出显示如下所示 我在用self t
  • ggplot2:调整 R 中 PCA 双图中 PCA 载荷的标签位置

    Issue 我制作了一个PCA biplot使用包ggbiplot ggplot2 我使用该函数延长了载荷 箭头 geom segment 我想删除原始加载 短箭头 保留较长加载 新箭头 保留带有灰色背景的标签 但重新定位它们 使它们不重叠
  • ElasticSearch术语聚合后如何返回每个桶的所有文档?

    我使用以下简单查询来搜索弹性索引中的文档 query query string query test aggregations myaggregation terms field myField raw size 0 这将返回每个不同值的文
  • 修剪或剪切使用 mediarecorder JS 录制的音频

    所需知识 如何 从前面 缩短音频 blob 数组并仍然具有可播放的音频 Goal 我最终尝试使用 JS 录制连续 45 秒的音频循环媒体记录器 https developer mozilla org en US docs Web API M
  • 使用 C# 枚举嵌套的 AD 用户组

    我编写了一些代码来获取组和嵌套组的所有用户 我还想确保如果组成员身份通过使第一个组成为最后一个组的成员而导致循环 则不会发生循环 我写的代码工作正常 但有点慢 这是我第一次尝试进行 AD 查找 有人可以看一下并告诉我代码看起来正常还是编码错
  • expo-video-player 出现问题,它抛出错误:setAudioModeAsync

    我的 expo video player 包有问题 我想通过 expo video player 显示视频 但是当我加载组件时它会抛出错误 我不知道如何解决它 所以我需要帮助 我尝试更改包源代码和组件道具 但它不起作用 这是代码 来自 ex
  • 使用 std::variant 强制使用通用接口,无需继承

    假设你有一些类似的课程Circle Image Polygon为此 您需要强制执行一个如下所示的通用接口 不是真正的代码 struct Interface virtual bool hitTest Point p 0 virtual Rec
  • Javascript正则表达式分割拒绝null

    是否可以让 JavaScript 正则表达式拒绝空匹配 是否可以告诉 String split 方法拒绝 null 值 console log abcccab split c result ab ab desired result ab a
  • ssh命令输出保存在shell脚本中的文本文件中

    我想编写shell脚本 其中我使用ssh命令 无论我通过 ssh 命令获得什么输出 我都想将其保存在文本文件或变量中 这样我就可以在我的 shell 脚本中使用它 目前我正在将输出保存在变量中 但是当我在 ssh 命令之外使用该变量时 值显
  • Google Maps API - 数组和 InfoWindows 的问题

    抱歉 如果这是微不足道的 但我是 JS 的新手 并且已经解决这个问题几个小时但无济于事 function initialize geocoder new google maps Geocoder var latlng new google