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

  • 小规模纳税人征税规定
  • 23年车辆购置税税率
  • 高新技术企业加计抵减
  • 其他应收款和其他应付款可以通用吗
  • 小微自开专票申报时怎么填写
  • 食品发票可以报销餐费吗
  • 购买业务委托书计入什么科目
  • 财务报表中的负债是什么意思
  • 固定资产按月折旧了,还能一次折旧么
  • 税控盘服务费减免政策文件
  • 工程设计企业符合增值税抵减政策吗
  • 资产损失类型有哪些
  • 加工成本属于什么会计科目
  • 库存材料盘亏会计分录
  • 营改增后房地产企业如何开票
  • 武汉房产税多少
  • 税务会计学知识点
  • 用货物抵账该怎么交税
  • 发票红冲和作废一样吗
  • 净资产是所有者权益一样吗
  • 1697506686
  • 亏损企业季度盈利企业所得税怎么预缴?
  • 总公司和分公司的合作协议
  • 股权变更需要缴纳印花税吗,缴纳多少
  • 外汇账户怎么做账
  • 工业增加值计算公式是什么
  • 如何快速判断
  • php怎么获取单选框的值
  • 大雾山国家公园总部加特林堡
  • PHP:imagecopymergegray()的用法_GD库图像处理函数
  • 受赠与获赠的区别
  • 公司投资款无法收回
  • 房产备案交税
  • android常用的集成开发工具有
  • php与java区别
  • sql语句的基本用法
  • redisson php
  • break能结束一个函数的调用
  • 无偿划转资产涉及产权转移应交税
  • 固定资产记到什么账本
  • 财务报表年报和汇算清缴的顺序
  • 股东个人转让股权印花税能入账吗
  • 公司滞纳金员工承担怎么做账
  • 安装SQL2005的实训体会
  • 所得税调增调减技巧
  • 什么叫印花税税率
  • 货物抵货款的账务处理
  • 涉税信息声明怎么提供
  • 免费样品的好处
  • 企业取得生产或制造某项财产物资时
  • 企业支付的产品和物资的原始价格是采购成本中的
  • 关于单独计价的规定
  • 收到补助款的会计分录
  • 中国电子口岸企业法人卡
  • 固定资产计提折旧的会计科目
  • 工会经费属于什么科目
  • 无形资产如何入股公司
  • win8还能用吗
  • linux管理工具有哪些
  • ubuntu启动vncserver
  • win10的命令行在哪里
  • 通过u盘安装win11
  • win7旗舰版系统激活密钥
  • win10 world文档
  • win7旗舰版玩dnf总是未响应
  • javascript that
  • js堆栈和队列
  • easyui选项卡
  • android 资源管理器
  • 苹果多点触控
  • jquery如何解决跨域问题
  • python saga
  • NGUI之UILocalize
  • jquery.browser
  • python定制函数
  • 已申报的纳税申报表怎么下载打印
  • 北京市工商局电话24小时客服热线
  • 公司出租非住宅税种
  • 武汉税务地区编号是多少
  • 工资个人所得税法
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设