文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
文章/答案/技术大牛
发布
首页
学习
活动
专区
圈层
工具
返回腾讯云官网
社区首页 >问答首页 >带有自定义图像和文本的标记(此处为地图)

问带有自定义图像和文本的标记(此处为地图)
EN

Stack Overflow用户
提问于 2019-10-12 00:06:57
回答 1查看 282关注 0票数 0

你知道有没有可能在图标的右边有一个标签，就像谷歌地图的功能"MarkerWithLabel“一样？

我已经有了一个解决方案，它不是我最喜欢的(图标的右侧)，我在图标的顶部有一个示例：

代码语言：javascript
运行
AI代码解释
复制
function addSVGMarkers(map){
  //Create the svg mark-up
  var svgMarkup = '<svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg">'+
  '<g id="unload-plate" transform="translate(27.49994 17.5)">'+
    '<g id="surface1">'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" />'+
      '<path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" />'+
    '</g>'+
  '</g>'+
  '<path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" />'+
  '<path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" />'+
  '<text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle">99-D-123456</text>'+
'</svg>';

  // Add the first marker
  var bearsIcon = new H.map.Icon(
    svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
    bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
      {icon: bearsIcon});

  map.addObject(bearsMarker);

}

    function addSVGMarkers(map){
  //Create the svg mark-up
  var svgMarkup = '<svg width="76px" height="53px" xmlns="http://www.w3.org/2000/svg">'+
  '<g id="unload-plate" transform="translate(27.49994 17.5)">'+
    '<g id="surface1">'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(9.48437 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M10.6016 30.793L10.7266 30.793C13.0781 26.8164 15.3477 22.7891 17.6406 18.7773C18.2109 17.7813 18.7851 16.7813 19.3594 15.7891C19.7305 15.1523 20.1406 14.5391 20.4297 13.8594C21.5781 11.1875 21.6406 8.15625 20.543 5.45313C20.0781 4.30469 19.3867 3.26953 18.5664 2.34375C15.4687 -1.17187 10.0156 -2.07422 5.85937 0C3.73828 1.05859 2.09375 2.78906 1.04297 4.89453C0.4375 6.10938 0.0585928 7.52344 0 8.87891C-0.0742187 10.6016 0.21875 12.2734 0.898437 13.8594C1.56641 15.418 2.59375 16.8711 3.4375 18.3438C5.8125 22.4961 8.16797 26.6719 10.6016 30.793L10.6016 30.793Z" transform="translate(0.003907203 1.082031)" id="Shape" fill="#D73925" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(11.78906 0)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(0.125 8.714844)" id="Shape" fill="#FF7F00" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(6.863278 9.402344)" id="Shape" fill="#FF0000" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(0 11.51563)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 0L1 1L0 0Z" transform="translate(21.14843 12.45313)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 0L0.999997 1L0 0Z" transform="translate(13.60156 26.76953)" id="Shape" fill="#00A65A" stroke="none" />'+
      '<path d="M0 144.5C0 64.6892 66.442 0 148.477 0C230.512 0 296.954 64.6892 296.954 144.5C296.954 224.248 230.512 289 148.477 289C66.442 289 0 224.248 0 144.5L0 144.5Z" transform="matrix(0.0623782 0 0 0.0622568 1.4375 1.433594)" id="Shape" fill="#FFFFFF" stroke="#FFFFFF" stroke-width="1" />'+
      '<path d="M8.85307 1.05859L14.1617 1.05859L14.1617 0L8.4976 0C8.10697 0 7.79057 0.316406 7.79057 0.707032L7.79057 8.23047L0.130413 10.2773C0.036663 10.3008 -0.0180244 10.3984 0.00541305 10.4961L0.189007 11.1758C0.212443 11.2734 0.3101 11.3281 0.407757 11.3047L9.21635 8.94532C9.27885 10.2578 10.3531 11.3086 11.6851 11.3086C13.0562 11.3086 14.1617 10.1992 14.1617 8.83204C14.1617 7.46485 13.0562 6.35938 11.6851 6.35938C10.6968 6.35938 9.85307 6.94141 9.45463 7.77344L8.85307 7.77344L8.85307 1.05859ZM11.6851 7.42188C12.4663 7.42188 13.0992 8.05469 13.0992 8.83204C13.0992 9.61329 12.4663 10.2461 11.6851 10.2461C10.9038 10.2461 10.2671 9.61329 10.2671 8.83204C10.2671 8.05469 10.9038 7.42188 11.6851 7.42188Z" transform="translate(3.619586 4.628906)" id="Shape" fill="#000000" fill-rule="evenodd" stroke="none" />'+
    '</g>'+
  '</g>'+
  '<path d="M0 0L75 0L75 52L0 52L0 0Z" transform="translate(0.5 0.5)" id="Rectangle-2" fill="none" stroke="none" />'+
  '<path d="M6.499 0L64.501 0C68.0903 0 71 2.9097 71 6.499L71 6.501C71 10.0903 68.0903 13 64.501 13L6.499 13C2.9097 13 0 10.0903 0 6.501L0 6.499C0 2.9097 2.9097 0 6.499 0Z" transform="translate(3.499939 2.499969)" id="Rectangle" fill="#000000" stroke="#000000" stroke-width="1" stroke-linecap="square" stroke-linejoin="round" />'+
  '<text x="38" y="12" font-size="11px" font-family="Arial" font-weight="bold" fill="white" text-anchor="middle">99-D-123456</text>'+
'</svg>';

  // Add the first marker
  var bearsIcon = new H.map.Icon(
    svgMarkup.replace('${FILL}', 'blue').replace('${STROKE}', 'red')),
    bearsMarker = new H.map.Marker({lat: 41.8625, lng: -87.6166 },
      {icon: bearsIcon});

  map.addObject(bearsMarker);

}

http://jsfiddle.net/pafcosta/upends4z/4/

谢谢/PC

here-api
EN

回答 1

Stack Overflow用户

发布于 2020-01-22 08:18:14

此逻辑也可以使用气泡信息实现，但是如果需要修改位置，则需要修改路径值。请参阅: developer.here.com/api-explorer/maps-js/infobubbles/open-infobubble

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/58349738

复制
相关文章
腾讯地图JavaScript API GL实现文本标记的碰撞避让
腾讯位置服务javascriptwebgl
本文主要是总结一下web页面中的旋转矩形的碰撞检测，碰撞算法本身并不难，只是需要注意web坐标系在计算中的影响。碰撞检测应该是在游戏等场景中很常见且基础的功能，本文记录了在JavaScript API GL遇到了这类碰撞问题的调研和实现的过程。
腾讯位置服务
2020/07/10
1.6K0
HTML图像标记和CSS入门(二)
css
3.1 font-size 字号大小 它的属性用于设置字号 相对长度 em px 最常用，推荐使用 3.2 font-family 字体 它的属性用于设置字体
默默的成长
2022/10/29
1.5K0
HTML图像标记和CSS入门(二)
HTML图像标记和CSS入门(一)
csshtml
1.图像标记 1.1 <img src="图像URL“/> src指定图像文件的路径和文件名，它是img标记的必需品。 1.2 文本属性 alt ：在图像无法显示时告诉用户该图片的内容。 1.3 图像的宽高属性 width，height 两者不能同时使用 1.4 图像的边框的属性 border ：可以为图像添加边框，设置边框的宽度，但边框颜色的调整仅仅通过HTML属性时不能通过的。 1.5 图像的边距属性 vspace 和hspace 1.6图像的对齐方式用align表示 2.相对路径和绝对路径 1.绝对路径 绝对路径一般是指带有盘符的路径
默默的成长
2022/10/29
2.2K0
android 高德地图标记,android学习之高德地图添加标记
httpsjava网络安全
draggable 如果您允许用户可以自由移动标记，设置为“ true ”。默认情况下为“ false ”。
全栈程序员站长
2022/08/31
1.8K0
高德地图自定义点标记大小_高德地图标注点点击事件 自定义参数
https网络安全node.js
if (!provinces || provinces.length == 0) {
全栈程序员站长
2022/08/25
7830
HTMl网页中的文本和图像
html搜索引擎list互联网浏览器
JaneYork
2023/10/11
3010
高德地图——标记「建议收藏」
addpointpolygonpolyline地图
标记显示地图上的单一位置。它可以使用一个标准的图标，也可以由开发 者自定义图标。您可以通过 AMap.addMarker(MarkerOptions Options) 方 法将一个标记添加到地图上。 MarkerOptions属性有： • position(Required) 在地图上标记位置的经纬度值。 参数不能为空。 • title 当用户点击标记，在信息窗口上显示的字符串（测试发现，点击没有任何效果）。 • snippet 附加文本，显示在标题下方（测试发现，点击没有任何效果）。 • draggable 如果您允许用户可以自由移动标记，设置为“true ” ，默认情况下为“false ” 。 • visible 设置“false ” ，标记不可见。 • anchor图标摆放在地图上的基准点。 • perspective设置 true，标记有近大远小效果。 • 可以通过Marker.setRotateAngle() 方法设置标记的 旋转角度，从正北开始，逆时针计算。
全栈程序员站长
2022/08/31
2.5K0
高德地图——标记「建议收藏」
为鼠标右键增加「此处打开命令窗口」
windows
程序员最常用的工具就是终端了，而最实用的功能就是如何在某个目录下，快速的进入终端，以便对该目录的文件做一些处理，本文分享一下如何在 Mac 和 Windows 下实现这个功能。
somenzz
2021/12/16
1.9K0
为鼠标右键增加「此处打开命令窗口」
Markdown文本标记语言初识
markdown开源
一直听说用Markdown写博文挺方便的，也一直没有在意，然而最近在用jupyter的时候突然发现jupyter是自带Markdown的，这让没用过的我很是尴尬。而且后来在网上翻博客的时候，发现“简书” 上的博客格式都非常漂亮，特别是层次非常清楚，排版也和工整，后来才知道这个就是用markdown写的。于是我也萌生了一个用markdown写文章的想法。 当然在这之前，肯定要了解下markdown的语法什么的。
mythsman
2022/11/14
3450
HTML常用文本标记，超级链接和路径描述
html
在body标记里写的文本内容会直接显示在页面上，但是这样直接写文本内容的方式不太好。我们在html里写文本内容的时候尽量使用标记套住内容，类似于声明这是一个文本、体现特征，在爬取数据的时候也就可以方便的通过标记来抓取或过滤指定的数据，所以需要我们学习一些常用的文本标记。
端碗吹水
2020/09/23
2K0
HTML常用文本标记，超级链接和路径描述
echarts中国地图如何标记散点图[通俗易懂]
https网络安全
工作中会遇到echarts在地图上面标记点位，后端数据传给城市名和坐标轴给你以后，如何添加到echarts上面渲染呢 echarts需要的数据 例子
全栈程序员站长
2022/11/10
3K0
echarts中国地图如何标记散点图[通俗易懂]
Scala的自定义类型标记
scala面向对象编程
Scala中有很多千奇百怪的符号标记，看起来是那么的独特，就像是一杯dry martini...好像黑夜中的萤火虫,那么耀眼,那么出众。
程序那些事
2020/07/08
8640
SAP MM 带有’Return’标记的STO，不能创建内向交货单？
globalkeysapstock
The current version of ERP does not support Stock Transport Order returns as standard with Logistics execution; it is not possible to automatically or manually create an inbound delivery against a Stock Transport Order which has the ‘return’ indicator ticked.
SAP虾客
2021/01/09
7660
腾讯位置服务地图SDK自定义地图和路况
腾讯位置服务
1)、首先，登录到腾讯地图管理控制台，然后进入个性化地图里面，随便找一个模板，选择编辑样式：
腾讯位置服务
2020/11/27
1.2K0
关于在数据库中分页的问题,此处以sqlServer为例
数据库sql
--sqlserver :数据库分页 --int pageSize//每页多少条数据 --int pageNow=1 //当前页,默认为1 --假如每页为10条 --pageSize=10 --按照以下规则进行拼接sql --FILED是你要排序的表中的列,Table是你要查询的表 select top(pageSize) * from (select *,row_number()over(order by FIELD desc)AS num from TABLE)a where a.nu
用户1215919
2018/02/09
5770
CVPR 2020 | 眼见为虚：利用对抗文本图像攻击场景文本识别模型
网络安全安全linux文字识别
本文简要介绍CVPR2020录用论文“What Machines See Is Not What They Get: Fooling Scene Text Recognition Models with Adversarial Text Images”的主要工作。该论文针对目前主流的场景文字识别（STR）模型，提出了一种高效的基于优化的对抗攻击方法。这是对抗攻击在场景文本识别模型中的首次尝试和研究。实验证明，该方法在7个真实数据和2个生成数据上大大降低了STR模型的识别性能，并成功攻击了百度OCR的识别引擎。
Amusi
2020/06/29
2.6K1
CVPR 2020 | 眼见为虚：利用对抗文本图像攻击场景文本识别模型
高德地图标记点要注意的问题
javahttps网络安全
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/143607.html原文链接：https://javaforall.cn
全栈程序员站长
2022/08/26
8800
高德地图标记点要注意的问题
SAP MM 带有'Return'标记的STO，不能创建内向交货单？
globalkeysapstock
The current version of ERP does not support Stock Transport Order returns as standard with Logistics execution; it is not possible to automatically or manually create an inbound delivery against a Stock Transport Order which has the 'return' indicator ticked.
SAP虾客
2021/03/01
7850
HTML布局标记和列表标记
bordertable表格布局
首先要介绍的布局标记是div标记，div可以做网页的层也可以做网页的分区。当div做网页的层时可以实现漂浮在网页上的效果，就像我们经常可以在网站里看见的那些漂浮广告。div做网页的分区时，则是可以布置网页的格局，把一个网页分为多个模块，由这些模块结构来构建出一个网页。
端碗吹水
2020/09/23
4.2K0
HTML布局标记和列表标记
以TS1131为例子讲述InTouch批量创建标记、标记名导入和导出
文件存储编程算法
InTouch 提供了两个 “标记名字典”实用程序：DBDump 和 DBLoad。
剑指工控
2021/11/08
5.2K0
以TS1131为例子讲述InTouch批量创建标记、标记名导入和导出

相似问题

将图表表示为地图标记-此处地图

11

带有超文本标记语言图像地图的JQuery

20

在此处显示标记旁边的文本-地图Android sdk。

215

带有自定义标记的Android地图(标记上的文本)

29

使用此处地图的基于文本/地址输入的标记更改

10
添加站长 进交流群

领取专属 10元无门槛券

AI混元助手 在线答疑

扫码加入开发者社群
关注 腾讯云开发者公众号

洞察 腾讯核心技术

剖析业界实践案例

扫码关注腾讯云开发者公众号
领券
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2025 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号 | 京公网安备号11010802020287

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档