位置: 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基础)

  • 政府征用土地补偿标准2021年
  • 哪些东西要征收消费税
  • 借款合同印花税减免优惠政策2022
  • 税收成本包括哪些
  • 销售货物收入确认条件
  • 货币资金应计入什么科目
  • 外资企业是否属于公有制经济
  • 所得税季报填错了已经申报了
  • 固定资产投资损失怎么做账
  • 收到以前年度的政府补助会计分录
  • 企业清算业务程序
  • 在建工程购入的空调怎样入账
  • 材料已入库,发票账单未到的会计分录
  • 行政事业单位专用材料费列支范围
  • 预支的采购备用金是什么
  • 项目上发生伙食问题
  • 工会劳动保护费不能列支劳保用品
  • 小企业盈余公积弥补亏损分录
  • 如何根据原始凭证填制记账凭证
  • 个体户查账征收没有成本票怎么办
  • 所得税 季报
  • 企业滞纳金属于什么会计科目
  • 网络销售平台优势有哪些
  • 鸿蒙系统怎么升级3.0
  • 无偿取得固定资产算不算收入
  • php实现的中秋博饼游戏之掷骰子并输出结果功能详解
  • 保险公司工伤保险
  • mssearch.exe - mssearch是什么进程 有什么用
  • wwwxxx域名选择(www.xxx.com或者.cn)
  • win7电脑开启麦克风权限设置
  • 闲置私家车出租APP
  • shell脚本攻略第三版pdf
  • 经营租入的设备为什么不属于资产
  • vue无线滚动
  • yolov5标签格式
  • 海关进口增值税计入什么科目
  • website
  • 免费赠送的产品报关金额
  • 视同销售在纳税明细表中怎么填
  • phpcms二次开发教程
  • 织梦系统如何更换网站内容
  • 增值税发票红字发票未抵扣怎么开
  • 为什么实收资本是贷方
  • 印花税减免优惠政策2019
  • 发票验旧验的是哪些发票
  • Table ‘xxx’ is marked as crashed and should be repaired 错误解决方法参考
  • 应付股利是否影响未分配利润
  • 破产清算应收账款怎么评估
  • 坏账准备贷方表示什么
  • 员工外面有自己的公司
  • 资产减值损失如何计算
  • 住宿费开的增值税专用发票怎么记账
  • 收入纳税明细里的收入和实际不符
  • 非关联企业之间可以借款吗
  • sql server 2005数据备份
  • sql server 将数字转换成日期
  • sql常用的语句大全
  • linux虚拟机基本操作
  • fedora系统
  • win10的打开方式
  • win7系统计算机名称在哪看
  • mmc.exe是什么
  • 程序中map是什么意思
  • 2020win7免费升级win10教程
  • win10系统开机重装教程
  • linux 内存文件夹
  • 自动释放池原理,本质
  • JavaScript中的方法名不区分大小写
  • 检测ip地址命令
  • angular api
  • python脚本代码大全
  • unity3d官方教程
  • unity第三人称视角跟随物体移动
  • javascript基于什么的语言
  • js获取设备
  • python简易
  • 特殊工种作业人员
  • 盐城买家电到哪里买
  • 成都国税工勤人员待遇
  • 北京地税查询官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设