位置: IT常识 - 正文

高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息(高德地图api是什么意思)

编辑:rootadmin
高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息 高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息

推荐整理分享高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息(高德地图api是什么意思),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:高德地图Api 获取经纬度和获取详细地引入在哪儿引入,高德地图api收费标准是多少,高德地图api坐标拾取器,高德地图api坐标拾取器,高德地图api下载,高德地图api是什么意思,高德地图api是什么意思,高德地图api开放平台,内容如对您有帮助,希望把文章链接给更多的朋友!

通过 高德地图 JS Web 添加自定义图标,自定义窗口标记 已经能在地图中正常添加自定义标记了 这篇文章讲讲点击标记时,如何从自定义标记中获取你需要的信息,如何预置一些你自己的信息。

一、需求

我已经定义了一个这样的地图,并添加了这些标记,现在需要在点击这些标记的时候获取到对应的项目 id

二、探索解决高德地图 API,点击地图标记获取自定义标记 (Marker) 中的信息(高德地图api是什么意思)

没找到官方的例子,所以自己解决。

1. 如何往地图中添加标记

标记的添加是这样的过程(具体在上面提到的链接中有,不再冗述):

新建 AMap.Marker 的地图标记对象将这些 Markers[] 添加到已经建好的地图对象中标记就能正常呈现到地图中了2. 给标记添加点击事件

在上面的第2步中,可以给 Marker 添加点击事件,跟普通的 dom 一样操作,它的格式是这样的: 我这里定义的是自定义的标记点,并在其 html 结构中添加了名为 data-projectid 的参数

// 1. 新建 Markerlet marker = new AMap.Marker({ position: [ Number(projectItem.prjinfo.location.longitude), Number(projectItem.prjinfo.location.latitude), ], offset: new AMap.Pixel(0,-20), content: ` <div data-projectid="${projectItem.id}" class="marker ${projectItem.status === 'offline'? 'offline': ''}"> <div class="title">${projectItem.prjinfo.projectname}</div> <div class="note">位置: ${projectItem.prjinfo.location.detail}</div> <div class="note">设备: ${projectItem.prjinfo.deviceCnt} 个</div> <div class="note">状态: ${projectItem.status === 'offline'? '离线': '在线'}</div> </div>`,}]// 2. 给这个 Marker 添加点击事件marker.on('click', mapEvent => { console.log(mapEvent.target.dom.getElementsByClassName('marker')[0].getAttribute('data-projectid')) console.log(mapEvent.target)})// 3. 添加到地图中map.add(marker)3. 获取自定义标记中的自定义参数值

这里我们需要获取到上面提前定义好的 data-projectid 值。 答案全在 mapEvent 上,来看一下 mapEvent.target 内都有什么:

我们需要的是 mapEvent.target.dom 中的内容,它是一个 dom 对象:

获取到了它,就能使用 dom 的操作方法对齐进行取值了: 如果对 dom 的操作方法不太了解,最好去找下相关资料看一下,常见的就是:

getElementById()getElementByClassName()getElementByTagName()

像下面这样,我们就取到了它的 data-projectid 属性值

mapEvent.target.dom.getElementsByClassName('marker')[0].getAttribute('data-projectid'))

4. 做后续操作

取到值之后就可以了,你想怎么处理怎么处理就行了,比如用这个值去跳转到对应的项目中,用这个值去获取对应项目的信息等

本文链接地址:https://www.jiuchutong.com/zhishi/292943.html 转载请保留说明!

上一篇:蒙塔尔巴诺埃利科纳,意大利西西里岛 (© Antonino Bartuccio/SOPA Collection/Offset by Shutterstock)(蒙塔巴诺督查)

下一篇:基于Pytorch实现的EcapaTdnn声纹识别模型(pytorch基础)

  • 减免税填到营业外收入哪一项
  • 非税收入票据能否税前扣除
  • 我国现行的增值税属于什么
  • 金蝶能够反年结账吗
  • 金蝶软件中怎么增加固定资产
  • 补贴收入企业所得税
  • 购车发票需要认购吗
  • 研发加计扣除减免税
  • 个人从海外买东西自用要交税吗
  • 一般购销业务的账务处理
  • 应付职工薪酬明细账模板
  • 非在职员工是什么意思
  • 12月了还没找到工作怎么办
  • 喷绘广告公司税率是多少
  • 关于固定资产管理
  • 应收和预收可以抵消吗
  • 收到电子银行承兑汇票怎么做账务处理
  • 利息收入和利息费用的区别
  • 出纳交接工作注意
  • 单位个税申报后可以撤销吗
  • 建筑公司分包
  • 真实有效的18岁身份证
  • bios界面进入
  • linux sed 行尾
  • 食品类发票入账属于什么科目
  • 盈利结转利润
  • 个人销售自建自用住房解读
  • 企业股股票
  • 企业所得税合理方法包括
  • video.js教程
  • 多表关联join
  • win11硬件加速gpu计划怎么关
  • python搭建项目结构
  • php抢红包功能思路
  • 个税申报漏报人怎么办
  • 织梦网站停止使用了还侵权吗
  • 批处理命令在windows操作中的典型应用
  • 企业会计准则是属于什么
  • SQL Server Management Studio教程
  • 车间机器设备修理费用计入什么科目
  • 一次性扣除固定资产出售处理
  • 股东分红申报个税怎么填
  • 营改增后土地出让增值税
  • 长期待摊费用摊销是当月还是下月
  • 会计分录结转进项怎么算
  • 内账收入按含税还是不含税入
  • 把公司设备操作坏了怎么担责
  • 公司费用分摊给各部门
  • 向客户收取的承兑贴息款如何开发票
  • 公司缴纳印花税如何缴纳
  • 公司房租收据可以入账吗
  • 安全生产费计提和使用
  • 怎样计算债券利息
  • ubuntu docker教程
  • WINDOWS系统中删除放入回收站的文件占用什么空间
  • Mac怎么强制关闭窗口
  • linux获取进程启动时间
  • CentOS上查看系统信息以及配置防火墙的方法
  • be备份linux系统
  • unix系统复制命令
  • 启动npm服务
  • samba开启
  • 苹果mac安装
  • 神舟hasee笔记本测评
  • linux如何拨号
  • 如何把windowsxp换成windows7
  • ubuntu 14.04安装
  • opengl画矩形函数
  • Android---60---Notification 通知栏的简单使用
  • 关于国内邮政汇兑冻结下列说法正确的有
  • perl语言基本命令
  • 批处理中for语句的哪个参数表示目录
  • 下载python教程
  • 源码分析工具
  • mongodb python
  • jquery中的动画吗,是怎样用的
  • 置顶是怎么弄的
  • 厂房转让的土地税怎么算
  • a类棉b类棉c类的区别
  • 税务数据清理变态
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设