如何将 Google 地图标记链接到其他元素?

2023-12-23

使用谷歌地图 http://code.google.com/apis/maps/documentation/reference.html(和 JavaScript)我已经能够轻松地显示几个标记,每个标记上都有一个漂亮的小信息窗口。

//Create map over USA
map = new google.maps.Map2( document.getElementById('map') );
map.setCenter(new GLatLng(38.95940879245423, -100.283203125), 3);

//Create point, then marker, and then add to map
function create_marker(lat, lng, html) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);
}

var html = '<div>this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html);

但是,我现在希望能够将标记的“点击”链接到也可以更新页面其他部分的函数。例如,我想要一个侧边栏,其中包含标记信息窗口内容的副本。一样的方法位于左侧,标记位于右侧。我什至可能希望单击侧边栏内容来打开地图上给定的标记信息窗口。

问题是GMarker http://code.google.com/apis/maps/documentation/reference.html#GMarkerclick 事件仅传递纬度/经度 - 我不确定如何使用它来查找匹配的 div 或其他内容。

如何为每个标记获取唯一的 ID/句柄?


为每个标记及其在侧栏中的相应元素分配一个 id。创建一个事件侦听器来调用该 id。像这样的东西:

var html = '<div>this is my text</div>';
var sideHtml = '<div id="1">this is my text</div>';
create_marker(38.95940879245423, -100.283203125, html, 1);
$("#sidebar").append(sideHtml); // Add the text to the sidebar (jQuery)

//Create point, then marker, and then add to map
function create_marker(lat, lng, html, id) {
    var marker = new GMarker( new GLatLng(lat,lng));
    marker.bindInfoWindow(html);
    map.addOverlay(marker);

    GEvent.addListener(marker, 'click', function(latlng) {
        var div = document.getElementById(id); //access the sidebar element
        // etc...
    });
}

也可以看看这个问题 https://stackoverflow.com/questions/1490266/.

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

如何将 Google 地图标记链接到其他元素? 的相关文章

  • 如何使用jquery格式化数字

    我正在尝试删除 之后的数字 然后我想格式化数字 16810900 211233 喜欢这个 16 810 900 但我不知道该怎么做 这是我的 html 是这样的 div class main p class active 10200 00
  • 将图像缩略图上传到服务器,而不上传整个图像

    据我所知 我在这里问的是不可能的 但我想无论如何我都会问 以防我遗漏了什么 假设您想让用户上传 JPG 图像 并且这些图像被缩放为较小的图标 并且原始图像始终被丢弃并且不再需要 有没有什么方法可以在大多数现代浏览器中普遍使用 让用户选择硬盘
  • 使用 Charts.js 禁用动画

    我在使用 Charts js 关闭动画时遇到一些问题 这是我的代码 var pieData value 30 color F38630 value 50 color E0E4CC value 100 color 69D2E7 var myP
  • 将其作为参数传递给 addEventListener()

    我想添加change一组复选框的事件 我如何访问this在我的事件函数中 这样当我执行事件时我可以访问复选框的值 这是我当前的代码 var checkboxes document getElementsByClassName cb Arra
  • 获取 pdf 第 1 页(共 2 页)的图像

    我正在使用 html2canvas 和 jsPDF 以及 Angular4 创建图像 我想将此图像放置在 2 页生成的 pdf 的第 1 页上 但似乎这条线 doc save test pdf 需要在函数内部htm2canvas 因为如果我
  • 强制执行 show.bind

    我有一个包含数据的表 当从另一个视图触发事件时 我希望视图检查 show bind 语句 问题是该事件没有更改当前视图中的任何数据 foo html tr p canBeRemoved p tr 我正在使用 EventAggregator
  • 从对象获取数据 - 我看到数据但无法保存它们

    正如你所看到的 我是新来的 我确实尝试过搜索 但没有找到解决我问题的方法 所以这是我的问题 如果我这样做 console log grid data kendoGrid data 这在控制台中显示如下 所以我明白这一点 有一个数组和一个带有
  • Backbone.js 应用程序可以逐步增强并可供搜索引擎抓取吗?

    我需要为我的下一个项目实现一个 MVC JavaScript 框架 但它既是一个网站 又是一个 Web 应用程序 是否可以公开数据服务器端 然后解析 URL 以显示 JS 版本 我计划使用 Rails 作为服务器端代码 我写了一个关于这个主
  • jQuery 如何通过不同的列值计算表中的行数

    如何按表列计算不同的表行 Example table thead tr th NAME th th TECHNOLOGY th tr thead tbody tr td john td td jQuery td tr tr td mark
  • 根据数据更改图例颜色高图表

    我可以根据数据动态设置列的颜色 但无法弄清楚如何更改图例中的颜色 请注意 jsfiddle 最新的条形图是绿色的 但图例是蓝色的 有没有办法改变列颜色也会改变图例颜色 这是我用于列颜色的代码 jsfiddle http jsfiddle n
  • Webpack:如何将 javascript 注入 HTML 而不是单独的 JS 文件

    有没有办法让 webpack 将输出注入 HTML 而不是单独的文件 我不得不使用html webpack inline source plugin https github com DustinJackson html webpack i
  • 谷歌浏览器如何启动桌面应用程序?

    我真的不知道术语 所以我将从一个例子开始 如果我点击磁力链接 Google Chrome 会询问我是否要启动 torrent 客户端 我单击 确定 chrome 启动该应用程序 该应用程序根据链接执行一些操作 现在有办法查看应用程序如何从
  • javascript 中一次仅选中一个复选框

    I have 3复选框 我只想1一次选中的复选框 下面是我的 html 小提琴 JS小提琴 https jsfiddle net n03jLhqa 我想要这个工作在IE8还请建议如何做 这个怎么样 fiddle http jsfiddle
  • 用于图形操作的 Javascript 库

    有没有建议的 javascript 替代 pythonpygraph http code google com p python graph or NetworkX http networkx lanl gov 应该注意的是 可视化不是必需
  • JavaScript 按名称获取当前作用域中的变量

    所以我有一个变量和该变量名称的字符串 function Factory string var foo bar console log foo is equal to this string 如果变量所在的对象是当前对象 如何从字符串文字中获
  • 加载 angularjs 路由后运行 javascript 代码

    我需要在 angularjs 加载路线后显示警报 显示警报的代码位于 angularjs 异步加载的视图中 视图加载后 我希望它能够运行 但它没有 我知道我可以广播并告诉它稍后运行等 但我需要一个更通用的解决方案 假设您正在谈论基于以下内容
  • jQuery 单击附加元素不起作用

    我有一个数组 我正在从 Array 获取数据并在 jQuery Append to list 中使用它 但是当我单击列表项时 它只显示最后一个元素 var array 1 2 7 3 4 8 5 6 9 for var i 0 i lt a
  • 限制线的长度

    我正在尝试画一条代表 弹弓 的线 并且希望它具有最大拉伸长度 在 p5 中 我在位置和位置之间画了一条线 line posA x posA y posB x posB y posA 是鼠标 x 和 y posB 是画布上圆的位置 我想要做的
  • 自动更改 Twitter Bootstrap 选项卡

    我希望 Twitter Bootstrap 选项卡按时间顺序更改 我使用它们有点像旋转木马 我希望选项卡每 10 秒切换到下一个选项卡 这是一个例子 http library buffalo edu http library buffalo
  • python 函数返回 javascript date.getTime()

    我正在尝试创建一个简单的 python 函数 它将返回与 javascript 相同的值new Date getTime 方法 如所写here http www w3schools com js js dates asp javascrip

随机推荐

  • NuGet 用于多个项目的解决方案

    假设我有一个包含 3 个项目的解决方案 Core UI Tests 我使用的一些 NuGet 包将适用于所有 3 个项目 有些仅适用于 UI 和测试 有些仅适用于测试 如 NUnit 是什么right使用 NuGet 进行设置的方法 当我需
  • Python 内省:如何获取类方法的变量名?

    我想获取类方法的关键字参数的名称 我想我了解如何获取方法的名称以及如何获取特定方法的变量名称 但我不知道如何组合这些 class A object def A1 self test1 None self test1 test1 def A2
  • 优化 Delphi 中的类大小。有没有类似“打包课程”之类的东西?

    我正在尝试优化 Delphi 类的大小 以便它们占用尽可能少的内存 因为我创建了大量的类 问题是 课程本身很小 但并没有占据我预期的空间 例如 如果我有 type MyClass class private mMember1 integer
  • 打开外部终端键绑定不起作用

    I can t open a new external terminal with CTRL SHIFT C Did a new update remove this function I was able to use this shor
  • 如何实现“require_global”?

    现在的情况 我有当前版本我的 MVC 框架使用类作为控制器 我有一些 老式 模块oldMVC 框架使用简单 扁平的包含作为控制器 非常简单 这意味着 新版本 旧版本 我现在正在尝试编写
  • Room 中是否可以忽略基本更新中的字段

    我有以下实体 Entity class Foo PrimaryKey ColumnInfo name id val id Long ColumnInfo name thing1 val thing1 String ColumnInfo na
  • 将 SQLAlchemy 会话与 Celery 一起使用的正确方法是什么?

    我已经尝试弄清楚这个问题有一段时间了 但我现在找到的很多答案都已经过时 超过 6 年前的帖子 或者相关性较低 问题实际上是如何在 celery 中正确处理数据库会话 我当前的设置是 我有一个全局 DbEngine 对象 其中包含dsn en
  • 快速将 Excel 导入数据表

    我正在尝试将 Excel 文件读入 Data DataTable 列表中 尽管使用我当前的方法可能需要很长时间 我基本上是逐个工作表 逐个单元地进行操作 这往往需要很长时间 有没有更快的方法来做到这一点 这是我的代码 List
  • 如何禁用/隐藏 vscode-python 中的变量分组

    最近的 ms python 扩展 v2020 5 86806 https github com microsoft vscode python releases tag 2020 5 86806 for vscode 在调试控制台 变量资源
  • 部署到生产时找不到索引视图?

    尝试将 MVC 应用程序部署为现有 ASP NET 3 5 应用程序 非 MVC 的子应用程序时 我遇到了问题 错误是 The view index or its master could not be found The followin
  • 如何阻止 WPF KeyDown 事件从某些包含的控件(例如 TextBox)中冒泡?

    我的程序非常大 并且使用 WPF 我想要一个使用 R 的全局快捷键 不带修饰符 有许多控件 例如 TextBox ListBox ComboBox 等 它们都在控件本身内部使用字母 这很好 这对我来说是正确的 But 我想阻止 KeyDow
  • 如何在一个proc打印语句中打印多个数据集?

    我有一个 sas 查询 如果我创建了 3 个数据集 可以说命名为ds1 ds2 ds3 现在 我想在一个 proc print 语句下打印所有这些 那么我们该怎么做呢 就像 我想要这样的东西 proc print data work ds1
  • 在 GPU 上计算图像相似度 [OpenGL/遮挡查询]

    OpenGL 假设我绘制了一幅图像 然后使用 XOR 绘制了第二幅图像 现在我在某处有了带有非黑色像素的黑色缓冲区 我读到可以使用着色器来计算 GPU 上的黑色 rgb 0 0 0 像素 我还读到它必须与 OcclusionQuery 做一
  • 在自定义静态框架 iOS 中使用 magicrecords 库

    我一直在为 iOS 实现一个自定义静态框架 一切都运行良好 但现在我意识到我需要通过框架中的 coredata 存储信息 我一直在之前的项目中使用 magicrecord 库 我想知道是否有人有将 magicrecord 集成到您自己的自定
  • 获取 LinkedHashSet 的最后一个

    我想存储数字 1 2 3 4 的列表 让我们从List
  • Proguard 保留接口方法参数名称

    我使用 keepparameternames 但它不响应界面 The interface s methond parameter is proguard Thank you for your help Proguard 可以很好地保留参数名
  • LISTAGG 奇怪的串联[重复]

    这个问题在这里已经有答案了 当我使用下面的查询来获取所需的详细信息时 SELECT USERNAME FULLNAME DEPARTMENT LISTAGG TASKNAME WITHIN GROUP ORDER BY TASKNAME T
  • 如何在 Xamarin 中获取 GoogleApiClient?

    我想实现类似的东西this https stackoverflow com a 25173057 2611340在我在 Xamarin 中开发的 Android 应用程序中 但找不到其中的命名空间GoogleApiClient是 有人可以帮
  • Blackberry OS 4.5 应用程序的通知服务

    我正在开发一个类似于电子邮件应用程序的应用程序 每当收到新消息时 我的通知服务应通过更新图标向用户指示更改 此外 通知服务应持续侦听服务器的传入事件 我正在使用 4 5 版本的操作系统进行开发 RIM OS 您有多种选择来通知 用户 都不是
  • 如何将 Google 地图标记链接到其他元素?

    使用谷歌地图 http code google com apis maps documentation reference html 和 JavaScript 我已经能够轻松地显示几个标记 每个标记上都有一个漂亮的小信息窗口 Create