Google 地图 v3 折线工具提示

2024-03-27

谷歌地图标记对象 (google.maps.Marker) 有一个 title 属性,因此当用户将鼠标移到标记上时,会显示一个简单的工具提示。

折线 (google.maps.Polyline) 上没有标题属性。有没有办法可以在 V3 中做到这一点/模拟这一点? 我可以在 V2 中执行此操作,但我找不到 V3 的示例。


我将上面 @samshull 的答案(正式投票!)与来自的信息结合起来here https://developers.google.com/maps/documentation/javascript/events?csw=1#EventArguments使信息窗口 https://developers.google.com/maps/documentation/javascript/reference?csw=1#InfoWindow出现在用户光标悬停在该行上方的位置:

// Open the InfoWindow on mouseover:
google.maps.event.addListener(line, 'mouseover', function(e) {
   infoWindow.setPosition(e.latLng);
   infoWindow.setContent("You are at " + e.latLng);
   infoWindow.open(map);
});

// Close the InfoWindow on mouseout:
google.maps.event.addListener(line, 'mouseout', function() {
   infoWindow.close();
});

Here, line是你的PolyLine https://developers.google.com/maps/documentation/javascript/3.exp/reference#Polyline目的;map是你的Map https://developers.google.com/maps/documentation/javascript/reference?csw=1#Map目的;和infoWindow是您的 InfoWindow 对象,我刚刚使用它创建:

var infoWindow = new google.maps.InfoWindow();

我也关注这个建议 https://developers.google.com/maps/documentation/javascript/infowindows#add通过为所有折线重新使用相同的 InfoWindow 对象,而不是为每一行创建一个新对象:

最佳实践:为了获得最佳用户体验,只有一个信息窗口 应该随时在地图上打开。多个信息窗口使 地图显得杂乱。如果您一次只需要一个信息窗口, 您可以只创建一个 InfoWindow 对象并在不同的位置打开它 地图事件(例如用户点击)上的位置或标记。如果你这样做 需要多个InfoWindow,可以显示多个InfoWindow 同时对象。

注意infoWindow.setContent()需要一个字符串。所以打电话toString()如果您想在信息窗口中显示数字,请在数字变量上。

我认为所有这一切都是一个不完美的解决方法,直到谷歌地图希望有一天添加一个title财产给折线选项 https://developers.google.com/maps/documentation/javascript/reference#PolylineOptions,就像他们已经做过的那样标记选项 https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions.

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

Google 地图 v3 折线工具提示 的相关文章

  • 从 JavaScript 重新启动动画 GIF,无需重新加载图像

    我正在使用动画 GIF 创建动画幻灯片 我正在从一个动画淡入淡出到下一个动画 问题是 我发现确保 GIF 从第一帧开始动画的唯一方法是每次显示时重新加载它 每个 GIF 大约 200KB 这对于连续幻灯片播放来说带宽太大了 这是我当前的代码
  • Javascript图像编辑插件

    在哪里可以找到 Javascript 或 jQuery 图像编辑器插件 用户可以单击图像进行编辑 并且该插件允许他们进行裁剪 调整大小 旋转 翻转等 Pixastic http pixastic com lib 不再活跃 和CamanJS
  • Javascript 函数指针,以参数作为函数中的参数

    不确定标题的措辞是否正确 或者是否有更好的表达方式 但我认为还可以 无论如何 到目前为止我了解以下内容 a b a b c foo 其中 foo 是在其他地方定义的函数 不接受任何参数 只会导致函数 a b 使用上述参数运行 然后可以在函数
  • 使用ajax发送表单数据

    我想用 ajax 以表单形式发送所有输入 我有一个这样的表单
  • 无法使用 Jade 模板包含相对路径文件

    当我尝试将文件包含在同一文件夹中时 收到以下错误 the filename option is required to use include with relative paths 有两个文件 索引 jade 项目列表 jade cont
  • 如何从左向右滑动文本和图像并具有滑动效果[关闭]

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 如何使用 JavaScript 压缩文件?

    有没有办法使用 JavaScript 来压缩文件 例如 在雅虎邮件中 当您选择下载电子邮件中的所有附件时 它会被压缩并下载到单个 zip 文件中 JavaScript 能够做到这一点吗 如果是这样 请提供一个编码示例 我发现这个图书馆叫js
  • 如何将 vue3-openlayers 插件添加到 nuxt

    我有以下 main ts 文件Vue3 https v3 vuejs org import createApp from vue import App from App vue How to do this in nuxt3 import
  • linkedin js 如何是有效的 javascript

    LinkedIn Javascript 集成是通过以下方式完成的 我不明白 这怎么是一个有效的javascript 为什么 api key 没有被引用 脚本标签的主体带有src永远不会被执行 但是 加载的脚本可以像访问任何其他元素的内容一样
  • 当系列没有相同的时间值时,如何在工具提示中显示所有系列

    我有一个显示多个时间序列的图表 不同时间序列不会同时采样 有没有办法在工具提示中显示所有系列 在示例中 您可以看到所有系列都包含在前 2 个点的工具提示中 因为它们是同时采样的 其余点仅包含 1 个系列 var myChart echart
  • 全日历与 UTC 和本地日期的混淆

    我确实让 fullcalendar 正常初始化 所以它代表当前日期 午夜 gt 午夜 1 天 1 小时时段 我从其他一些数据源获取带有时间戳的数据 格式为 YYYY MM DD HH mm 作为字符串传输 无时区信息 因此 我将该字符串转换
  • React setState回调返回值

    我是 React 新手 我希望实现这种流程 set the state execute a function f an async one which returns a promise set the state again return
  • 如何将类组件中的 props 发送到功能组件?

    我是 ReactJS 的初学者 需要知道如何将一个页面中的 props 值发送到另一个页面 道具位于第一页上我可以获取类组件值如何获取另一页中的值 提前致谢 墙色 jsx import React Component from react
  • 如何在 Node.js 中打开 Windows-1255 编码文件?

    我有一个 Windows 1255 希伯来语 编码的文件 我希望能够在 Node js 中访问它 我尝试使用打开文件fs readFile 它给了我一个Buffer我无能为力 我尝试将编码设置为Windows 1255 但这没有被识别 我还
  • 检查是否安装了 Google Analytics 或 Universal Analytics?

    我正在尝试通过 JavaScript 来确定是否加载了 Google Analytics 或 Universal Analytics 一些客户仍在使用旧的 Google Analytics 我们希望推出一个收集数据的 JavaScript
  • 如何从 Visual Studio Code API 打开浏览器

    我只是在探索一种从用于开发扩展的 Visual Studio Code API 打开默认浏览器的方法 以下是我的代码 var disposable vscode commands registerCommand extension brow
  • 从 node.js 创建对 AWS ES 实例的有效签名请求

    我试图找到一个示例 说明如何连接到 Node js 中的 AWS ES 实例 然后通过一个简单的请求访问 ES 集群 我正在尝试使用elasticsearch节点包 https www npmjs com package elasticse
  • 如何加载Jquery Tiny滚动条

    所以我想自定义一个滚动条 我发现了一个很小的滚动条 这是一个jquery插件 http baijs nl tinyscrollbar http baijs nl tinyscrollbar 问题是 无论如何我都无法让它工作 我将 Jquer
  • gjs 如何使用 g_data_input_stream_read_line_async 在 Gnome Shell 扩展中读取套接字流

    我正在尝试编写一个 Gnome Shell 扩展 通过 Socket 服务器与 Arduino 进行通信 服务器和 Arduino 运行良好 但我陷入了监听传入服务器消息的扩展代码 因为我需要一种非阻塞方法 所以使用异步读取行 https
  • 如何向 SvelteKit/Vite 应用添加版本号?

    我正在尝试在我的 SvelteKit 应用程序中创建一个系统 它会在某个页面上向您显示有关当前应用程序版本的信息 最好是 Git 提交哈希和描述 我尝试使用Vite的定义功能 https vitejs dev config define在构

随机推荐

  • CheckedChanged 事件中的问题

    我有一个复选框 并且我已订阅 CheckedChanged 事件 处理程序在那里执行一些操作 我以编程方式选中和取消选中该复选框 例如 chkbx Name Checked true 并且 CheckedChanged 事件被触发 我希望仅
  • 如何创建链式管道?

    我想创建一个简单的链式管道 我发现this https stackoverflow com questions 33658355 piping output from one function to another using python
  • SSIS 脚本组件不允许文本流输出

    我正在尝试使用 SSIS 将 JSON 文件导入到我的数据库中 由于我使用的是 SQL Server 2016 因此我可以将文件放在一行中并使用 OPENJSON 读取它们 我的问题是不想只引入 JSON 文本 我还想需要从文件名和当前目录
  • 如何将CAP文件加载到java卡

    我是java卡的新手 你能帮我看看如何将Applet CAP文件解析为APDU吗 用于将此 CAP 文件安装到支持 GP2 2 的卡上 你应该尝试使用GPShell http sourceforge net projects globalp
  • 无法在 Mac OS X 10.6 上的 Python 中将 Matplotlib 中的字体更改为 Helvetica

    我正在尝试将 matplotlib 字体更改为 helvetica 我想在 PDF 图中使用它 我尝试以下操作 import matplotlib matplotlib use PDF import matplotlib pylab as
  • 将用户重定向到不同 ASP.NET Core Razor 网站中的页面

    我有一个 ASP NET Core 2 1 Razor 应用程序 其中有两个在登录前处于活动状态的菜单项 我想在单击任一菜单项时转移 重定向 到其他网站 我尝试过重定向 如下所示 但当前 url 添加到我指定的字符串中 public IAc
  • 根据水年创建日索引

    我正在处理水文数据 我需要水年 我已经根据之前在此论坛上发布的功能成功创建了一个水年专栏 我想要的是有一个陪伴water day范围从 1 365 闰年为 366 以匹配水年序列 请注意 水年是由其结束的日历年指定的 例如 2010水年从2
  • Linux IPC:共享内存回收

    我有两个进程 生产者和消费者 通过使用生成的共享内存段进行通信 old https stackoverflow com questions 21311080 linux shared memory shmget vs mmap接口而不是 m
  • 将 ENGINE 上下文附加到 SSL_CTX

    我想知道是否有可能附加一个ENGINE 实施到SSL CTX and or SSL 结构 我想要实现的是拥有一个SSL CTX 将使用 OpenSSL 中内置的默认加密操作和另一个设置SSL CTX 将使用专用 HSM 作为加密层 我可以通
  • Ext.data.Store getTotalCount() 加载后不计算

    我的商店在调用时并不总是返回正确数量的记录getTotalCount 这个问题出现在我之后load 商店 我知道在检查时商店里有记录 我正在使用 ExtJs 4 1 3 this grid reference to my grid var
  • Swift:使用未声明的类型

    我正在实现一个类 但出现此错误 使用未声明的类型 myProtocol 这是我的代码 class LocalContactService myProtocol 你们中有人知道为什么我会收到此错误吗 我遇到了同样的错误 在我的情况下 我意外地
  • shinyapps setAccountInfo 错误

    当我尝试配置我的shinyapps根据以下指南在 my shinyapps io 上注册帐户信息https github com rstudio shinyapps blob master guide guide md https gith
  • Excel VBA - 将图表保存为 GIF 文件

    编程不是我的主要工作职能 但似乎是我所认为的瑞士军刀 我的任务是在 Excel 中制作一个 VBA 宏 将图形导出到 gif 文件 以便自动更新我们制造工厂的信息屏幕 我有一个可以工作的宏 但是 它有时会失败并创建一个具有正确文件名但 空
  • 实体框架中实体之间的复杂关系

    也许它是重复的 但我找不到任何这样的主题 我正在使用实体框架 数据库中有两个表 public class A public virtual B B1 get set public virtual B B2 get set public cl
  • ORA-01722: 实体框架上的编号无效

    我正在从 Oracle DB 执行一个存储过程 即 PROCEDURE GET TIM USER CUSTO P ANOMES IN VARCHAR USER CUSTO OUT SYS REFCURSOR IS BEGIN OPEN US
  • 如何从特定的目标文件生成特定的二进制文件?

    这是我的 makefile 我在 obj 目录中有目标文件 我需要将它们编译成 bin 文件夹中的二进制文件 但不知何故它无法按我希望的方式工作 有什么想法吗 SOURCES wildcard c OBJECTS patsubst c o
  • 安卓用C++还是Java?

    我正在考虑在空闲时间学习 Android 开发 我发现 Java 和 C 都可以进行开发 但后者是有限的 我对 C 更加满意 所以我的问题是 Android 上的 C 存在哪些限制 我能够用它开发完整的应用程序吗 还是我最终必须学习 Jav
  • C 中数组的理想数据类型

    我想存储键和可变大小数组之间的静态关联 foo gt bar awe foo2 gt bar2 awe2 gruh 该数组在程序执行期间永远不会改变 它只是将字符串变量数组与字符串键静态关联的一种方法 子阵列的数量非常少 我怎样才能纯粹地做
  • 等待 .forEach() 完成的最佳方法

    有时我需要等待 forEach 方法来完成 主要是 加载器 功能 这就是我这样做的方式 q when array forEach function item iterate on something then function contin
  • Google 地图 v3 折线工具提示

    谷歌地图标记对象 google maps Marker 有一个 title 属性 因此当用户将鼠标移到标记上时 会显示一个简单的工具提示 折线 google maps Polyline 上没有标题属性 有没有办法可以在 V3 中做到这一点