如何在 Google 地图 V3 中创建编号地图标记?

2024-05-20

我正在制作一张上面有多个标记的地图。

这些标记使用自定义图标,但我还想在顶部添加数字。我已经了解了如何使用旧版本的 API 来实现这一点。我怎样才能在V3中做到这一点?

*注意——当您将鼠标悬停在标记上时,“标题”属性会创建一个工具提示,但我希望即使您没有将鼠标悬停在自定义图像的顶部,该内容也会分层在自定义图像的顶部。

这是标记类的文档,这些属性似乎都没有帮助:http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions http://code.google.com/apis/maps/documentation/v3/reference.html#MarkerOptions


不幸的是,这并不容易。您可以基于 OverlayView 类创建自己的自定义标记(一个例子 http://gmaps-samples-v3.googlecode.com/svn/trunk/overlayview/custommarker.html)并在其中放入您自己的 HTML,包括一个计数器。这将为您留下一个非常基本的标记,您无法轻松拖动或添加阴影,但它是非常可定制的。

或者,你可以将标签添加到默认标记 http://blog.mridey.com/2009/09/label-overlay-example-for-google-maps.html。这将不太可定制,但应该可行。它还保留了标准标记所做的所有有用的事情。

您可以在 Google 的文章中阅读有关叠加层的更多信息MVC 对象的乐趣 http://code.google.com/apis/maps/articles/mvcfun.html.

编辑:如果你不想创建 JavaScript 类,你可以使用谷歌的图表 API http://groups.google.com/group/google-chart-api/web/chart-types-for-map-pins。例如:

编号标记:

http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=7|FF0000|000000

文本标记:

http://chart.apis.google.com/chart?chst=d_map_spin&chld=1|0|FF0000|12|_|foo

这是快速简便的路线,但可定制性较差,并且需要客户端为每个标记下载新图像。

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

如何在 Google 地图 V3 中创建编号地图标记? 的相关文章

  • 如何修复 Nuxt 中导航器/窗口/文档未定义的问题

    我试图确定 Nuxt 应用程序内的 UserAgent 和 Retina 信息 但应用程序抛出错误并显示导航 窗口未定义 我如何在 nuxt 应用程序中获取这些信息 const userAgent navigator userAgent t
  • JavaScript 对象引用缓存

    我们的代码库中有很多对象 它们的名称空间是为了避免冲突 Example App local view MyView 在我在代码库中看到的大多数地方 我们使用完整路径来获取对对象的引用 并且这在同一函数中重复多次 Example functi
  • React 渲染中的不变违规或 React 中迭代和返回的正确方法

    我在 React 渲染中遇到了持续存在的问题 这段代码 jsx React DOM var AnswerRows React createClass componentDidMount function render function th
  • Google 饼图未显示所有数据行

    我正在尝试绘制人口与国家名称的关系图 我发现 Google 可视化库仅渲染前几个 实际上数字似乎是随机的 具体取决于我使用的数据 有时添加 其他 条目 但它没有t 实际上具有其余条目的值 Example 1 With all countri
  • 通知用户消息仍在输入中

    我正在使用 Laravel 5 6 7 Socket IO 和 vue js 我没有使用 Pusher 和 redis 下面是我的代码 用于向与我一对一聊天的用户发送消息 var url http localhost 6001 apps M
  • 如何获取 RxJSSubject 或 Observable 的当前值?

    我有 Angular 2 服务 import Storage from storage import Injectable from angular2 core import Subject from rxjs Subject Inject
  • 未捕获的类型错误:this.props.signinUser 不是一个函数(…)

    src actions index js import axios from axios const ROOT URL http localhost 3090 export function signinUser email passwor
  • jQuery 的 css() 在应用于滚动事件时滞后

    我正在尝试实现一个简单的 固定标题 表 我知道这在理论上只能用 CSS 来完成 但是当涉及到 OSX Lion 及其消失的滚动条时 它效果不佳 所以我用 jQuery 来做 方法很简单 只有1 5行代码 inbox scroll funct
  • 从未定义解构时避免错误

    可以说我有这个代码 const x y point Babel 会将其变成 var point point x point x y point y 这很好 但是如果点未定义怎么办 现在我得到一个错误 Cannot read property
  • 在 JavaScript 中比较表单中的两个数字

    当我尝试比较不同的数字时 数字发生变化 但文本部分保持不变 这只发生在较大 较小的情况下 而不会发生在 NaN 或相等的情况下 这是我的代码 function check var a document getElementById a va
  • 使用 Javascript / Jquery 的本地存储(不使用 HTML5)

    我想在 javascript 或 jquery 中复制本地存储概念 类似于 HTML5 但不幸的是我不知道如何开始 任何人都可以建议如何使用 javascript 或 jquery 实现本地存储 不使用 HTML5 这是一个有点愚蠢的差事
  • 在 vue.js 模板中包含外部脚本

    我是 Vue js 和 web pack 的新手 所以我决定使用 vue cli webpack 来构建初始应用程序 我试图包含一个外部脚本 例如组件 不需要的模板中 但是 Vue 警告这是不允许的 我的 index html 文件与最初生
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • Web SQL 数据库 + Javascript 循环

    我正在尝试解决这个问题 但我自己似乎无法解决 我正在使用 Web SQL DB 但无法让循环正常使用它 I use for var i 0 i lt numberofArticles 1 i db transaction function
  • 使用 onBlur 事件上的值更新 React 输入文本字段

    我有以下输入字段 在模糊时 该函数调用服务来更新服务器的输入值 完成后 它会更新输入字段 我怎样才能让它发挥作用 我可以理解为什么它不允许我更改字段 但我能做些什么才能使其工作 我无法使用defaultValue因为我会将这些字段更改为其他
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • Postman - 如何计算 JSON 响应中特定对象的出现次数

    我是 JSON 和 Postman 的新手 我相信我正在尝试做一些非常简单的事情 我创建了一个 GET 请求 它将获得如下所示的 JSON 响应 在下面的例子中我想得到count响应中所有 IsArchived 属性 这些属性的数量因响应而
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • iOS 版 Google 地图 sdk 中折线的轮廓

    我的要求是在地图上显示一条绿色折线 但当地图切换到卫星视图时 绿色折线变得不清楚 我无法改变折线的颜色 因此 为了将折线与背景 地图的卫星视图 区分开来 我需要为折线绘制白色轮廓 我浏览了 GMSPolyline 类的文档 但找不到任何可以
  • 如何在 JavaScript 中获取浮点数的小数位?

    我想要的是与 Number prototype toPrecision 几乎相反的 这意味着当我有数字时 它有多少位小数 例如 12 3456 getDecimals 4 对于任何想知道如何更快地完成此操作 无需转换为字符串 的人 这里有一

随机推荐

  • 如何将函数内的捕获错误传递给父级

    我有这几行代码示例 想知道下面的逻辑到底如何 try var response child console log why here catch err console log should show this err function c
  • 为什么这个 SKPhysicsJointPin 不能将这 2 个精灵保持在一起?

    我显然不太了解 SKPhysicsJoint 但是除了 Apple 文档之外 网上的信息还很少 下面的代码有什么问题 我认为应该保持头部和颈部永久连接 我的意图是它们就像两张带有大头针的纸 这样它们可以旋转一点 但不仅仅是完全分开 当我运行
  • 变量在嵌套 lambda 中生存时间不够长的借用检查错误

    我在嵌套 lambda 中遇到错误 let rows vec vec 3 6 2 8 9 0 vec 0 0 1 4 5 1 let pair sums rows iter flat map row 0 row len map i row
  • phpActiveRecord 日期时间格式不正确

    当尝试使用 phpActiveRecord 在表中创建记录时 出现以下错误 Invalid datetime format 1292 Incorrect datetime value 2013 06 20 11 59 08 PDT for
  • 批处理文件中是否存在“Power to”功能? (指数)

    Problem 有没有办法将变量 乘以 数字或其他变量的批处理文件 有这个功能吗 Python 中的一个示例是您可以使用 为 到 的力量 EDIT 您可以在批处理文件中进行数学运算 http en wikipedia org wiki Ba
  • JavaScript onresize 事件多次触发

    我在尝试仅在触发 onresize 事件时运行一次函数时遇到一些麻烦 我已经看过这个问题DOM onresize 事件 https stackoverflow com questions 1500312 javascript onresiz
  • 为什么 ISNUMERIC('.') 返回 1?

    最近我在 SQL Server 中使用 ISNUMERIC 时遇到了一个问题 导致找到了这段代码 SELECT ISNUMERIC 这会返回 1 如 true 所示 难道不应该像 false 一样返回 0 吗 See Numeric 损坏了
  • 获取 2 个数据集 c# 中的差异

    我正在编写一个简短的算法 它必须比较两个数据集 以便可以进一步处理两者之间的差异 我尝试通过合并这两个数据集并将结果更改放入新的数据集来实现此目标 我的方法如下所示 private DataSet ComputateDiff DataSet
  • 直接使用从密钥库加载的 SecretKey 时,密钥用户未经过身份验证

    我正在尝试使用 Cipher 和在 KeyStore 中加载的 SecretKey 来加密数据 但总是收到此错误 导致 android security KeyStoreException 关键用户未经过身份验证 我尝试自己创建 Secre
  • BRISK 特征检测器检测零个关键点

    下面显示的 Brisk 探测器没有给我任何关键点 有人可以提出一个问题吗 我将尝试用一些代码解释我在下面所做的事情 include opencv2 features2d features2d hpp using namespace cv u
  • 如何一步步遍历目录树?

    我发现了很多关于遍历目录树的示例 但我需要一些不同的东西 我需要一个带有某种方法的类 每次调用都会从目录返回一个文件 并逐渐遍历目录树 请问我该怎么做 我正在使用函数 FindFirstFile FindNextFile 和 FindClo
  • Ubuntu 上的 Python 2.7

    我是 Python 新手 正在 Linux 机器 Ubuntu 10 10 上工作 它正在运行 python 2 6 但我想运行 2 7 因为它有我想使用的功能 有人敦促我不要安装 2 7 并将其设置为我的默认 python 我的问题是 如
  • 从字符串中获取数字

    我有一个字符串 例如 lorem 110 ipusm 我想获取 110 我已经尝试过这个 preg match all 0 9 string ret 但这正在返回 Array 0 gt 1 1 gt 1 2 gt 0 我想要这样的东西 Ar
  • ActionScript、NetStream.Play.Failed iOS AIR 移动设备

    我正在尝试以类似于 Tiberiu Ionu Stan http stackoverflow com questions 2036107 aac mp4 not working in actionscript 3s netstream 的方
  • 如何获取 UIWebView 中元素的位置?

    我在 iPad 程序中加载了 html 的 UIWebView 通过使用 webkit column width 我将 html 分为几列 padding 0px height 1024px webkit column gap 0px we
  • Youtube as3 API 似乎不再起作用

    我正在使用 as3 Youtube 官方 API 我需要在 swf 文件中加载 API 播放器 我已经在几个项目上完成了 一切都很好 但几个小时后 我的所有项目现在都坏了 这是崩溃的代码片段 Security allowDomain www
  • 无法在前端使用 JavaScript Fetch API 将文件上传到 FastAPI 后端

    我正在尝试弄清楚如何将图像发送到我的 API 并验证生成的token那是在header的请求 到目前为止 这就是我所处的位置 app post endreProfilbilde async def endreProfilbilde requ
  • 数据表日期范围过滤器

    如何添加日期范围过滤器 like From To 我开始进行常规搜索和分页等工作 但我不知道如何制作日期范围过滤器 我正在使用数据表 1 10 11 版本 My code var oTable function callFilesTable
  • 是否有一种更简单的方法可以并行运行命令,同时在 Windows PowerShell 中保持高效?

    此自我回答旨在为那些受困于 Windows PowerShell 并由于公司政策等原因而无法安装模块的用户提供一种简单且高效的并行替代方案 在 Windows PowerShell 中 built in可用的替代方案local并行调用是St
  • 如何在 Google 地图 V3 中创建编号地图标记?

    我正在制作一张上面有多个标记的地图 这些标记使用自定义图标 但我还想在顶部添加数字 我已经了解了如何使用旧版本的 API 来实现这一点 我怎样才能在V3中做到这一点 注意 当您将鼠标悬停在标记上时 标题 属性会创建一个工具提示 但我希望即使