无需点击地图即可在 Google 地图上使用箭头键导航

2023-11-22

我尝试在 Google Maps API 文档和此处进行搜索,但我无法找到如何执行此操作。

我试图在地图上默认设置箭头键导航,而无需单击地图区域来启用它。

我尝试了以下解决方案但没有成功:

map.getDiv().focus();
document.getElementById("map_canvas").focus();
google.maps.event.trigger(map, 'rightclick');

有人知道如何做到这一点吗?

谢谢你们。


这里需要注意一些事情,只需使用.focus()或触发点击操作#mapdiv 元素不会解决这个问题,因为这些操作发生在地图实际渲染到 DOM 上之前。因此,首先要承认的是tilesloaded谷歌地图库提供的事件。

google.maps.event.addListener(map, 'tilesloaded', function() {
    //do actions
});

我发现的第二件事是你不能只添加$('#map').click()在事件监听器内部。这是因为虽然#map是容器 div - 谷歌地图脚本实际上在其顶部渲染了一大堆其他 div(它们具有更高的 z 索引,也是实际保存地图图块的内容)。通过一些黑客攻击和 jquery,您可以缩小范围到包含图块的 div 并触发该 div 上的单击事件...结果代码是:

google.maps.event.addListener(map, 'tilesloaded', function() {    
    $("#map").children().children().first().children().trigger('click');
});

我使用 Chrome 的开发工具缩小到包含图块的 div 并使用 jquerychildren()方法从#map。如果你将该代码粘贴到你的 init 函数中,你应该可以开始了。这是一个JSfiddle以及解决方案的工作示例。

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

无需点击地图即可在 Google 地图上使用箭头键导航 的相关文章

随机推荐

  • 角度路径参数中的正斜杠

    如何设置我的路线 以便我的参数可以采用正斜杠 例如 myapp com file rootfolder subfolder myfile 这不起作用 const SECTION ROUTES Routes path file path co
  • 使用 Node JS 进行 HLS 流式传输

    我正在尝试使用 node js 流式传输 HLS 内容 但不知怎的 它不起作用 如果有人帮助我 那将会有很大的帮助 问题 尝试从 node js 提供 HLS 内容 不是直播 而是一组 ts 文件和 m3u8 播放列表 或者换句话说 VOD
  • 为什么 Createfile() 没有二进制标志

    Windows 编程的一大乐趣就是记住在所有文件打开调用中放入 wb 或 rb 或 ios binary 这样 Windows 就不会愉快地转换所有 0x13 我只需转换一堆很好的标准代码来使用 Createfile 来获取某个标志 我突然
  • Scala 泛型类的条件方法,具有类型参数的限制

    我相信泛型类可能仅在假设其类型参数符合一些附加限制的情况下才使其方法之一可用 例如 现场即兴编写的语法 trait Col T extends Traversable T def sum T lt Int T 0 this 我想我可以使用隐
  • 如何添加 SOAP 安全标头

    我读了很多文章和答案 但我无法解决 我在我的项目中使用 NET Framework 4 0 因此 我首先将 WebService 添加为服务引用 并在 app config 上获取绑定 我将列出我的尝试 尝试 1 我像这样实例化了服务并添加
  • 无法使用 Visual Studio 2015 命令行工具编译和链接简单的 C++ 程序

    使用 Visual Studio 2015 我无法再使用命令行工具编译和链接简单的 C 程序 考虑 main cpp include
  • Geochart:使用 ISO 3266-2 区域代码但显示真实姓名

    我正在使用Google 可视化 Geochart API创建一个国家地区的地图 我提供ISO 3266 2 国家细分代码并得到正确的结果 然而 在图表中将 ISO 3266 2 代码显示为标签是一种糟糕的用户体验 所以我想提供一个自定义标签
  • 使用代码启动 Photoshop 操作

    是否可以使用代码启动 Photoshop 操作 我的意思是通过批处理文件在 Photoshop 中启动该操作 或类似的东西 较新版本的 Photoshop CS5 和 CS6 是我使用过的唯一版本 支持一项称为Droplets它允许您创建可
  • 是否可以将 MyBatis 和 QueryDSL/jOOQ 结合起来?

    MyBatis 提供开箱即用的映射 本地缓存和日志记录 QueryDSL jOOQ 提供 SQL 语句的编译时检查和 IDE 自动完成功能 是否可以将它们结合起来 换句话说 我想使用 QueryDSL 或 jOOQ 创建一个查询 然后使用
  • java:字符串数组列表并删除

    在这样的测试中 Test public void test List
  • 强制 Flex 更新屏幕?

    这可能是一个初学者的问题 但我一生都无法弄清楚 我正在使用 Flex 为一个大型项目开发 GUI 特别是底部的状态栏 在我的 StatusBar 类中是一个 ProgressBar 其他正在工作的类可以告诉它在进展时更新 更改栏完成和标签
  • 登录表单是否需要令牌来抵御 CSRF 攻击?

    据我目前所知 令牌的目的是防止攻击者伪造表单提交 例如 如果网站有一个表单将添加的商品输入到您的购物车 那么攻击者可能会向您的购物车发送您不想要的商品 这是有道理的 因为购物车表单可能有多个有效输入 攻击者所要做的就是知道网站正在销售的商品
  • SignalR 中心中每个 web-api 请求的简单注入器依赖项

    根据this发布后 应该可以将每个网络请求的依赖项注入 SignalR 集线器 尽管有一些限制 例如 OnDisconnected 方法的问题 就我而言 它是 ASP Web API 不是 MVC 但由于某种原因它不起作用 以下是相关部分
  • swift 如何删除可选字符串字符

    如何删除可选字符 let color colorChoiceSegmentedControl titleForSegmentAtIndex colorChoiceSegmentedControl selectedSegmentIndex p
  • 如何让 Cucumber/Capybara/Mechanize 与外部非轨道站点一起工作

    我正在尝试在 Google 应用程序脚本上执行 BDD 我知道原则上我应该能够使用 Cucumber Capybara 和 Mechanize 的某种组合在非 Rails 外部站点上执行 BDD 在本例中 我尝试测试我创建的 Google
  • C++中获取返回值的类型

    假设我们有一个函数f它返回一个未知类型的值 我们称之为T 并采用类型的值T作为一个论点 可能还有一些其他论点 我如何获得返回类型f在 C 14 中 如果我们知道参数类型 就有一种方法可以做到这一点 通过std result of 如果我们知
  • 当客户端过早断开连接时,如何对烧瓶上的破损管道错误进行例外处理?

    我使用 Flask 进行开发 而不是生产 并且我有一个 ajax 请求的视图 如下所示 application route xyz
  • Scala 中硬币找零的 StackOverflowError?

    我正在编写一个递归函数硬币 零钱 问题在斯卡拉 我的实现因 StackOverflowError 而中断 我无法弄清楚为什么会发生这种情况 Exception in thread main java lang StackOverflowEr
  • 需要解决 .Net 母版页名称重整问题

    我正在评估将基于旧框架集的 ASP NET 网站转换为使用母版页 唯一阻碍我的是更新每个页面以处理名称修改所需的大量工作 我的大部分问题都与引用硬编码 ID 的 javascript 有关 有没有办法让我告诉 ASP Net 对于特定的内容
  • 无需点击地图即可在 Google 地图上使用箭头键导航

    我尝试在 Google Maps API 文档和此处进行搜索 但我无法找到如何执行此操作 我试图在地图上默认设置箭头键导航 而无需单击地图区域来启用它 我尝试了以下解决方案但没有成功 map getDiv focus document ge