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

  • 金税盘是什么时候开始使用的
  • 金税啥意思
  • 建筑劳务发票是全额抵扣吗
  • 卷票发票校验码在哪里
  • 资信证明好开吗
  • 实收资本实缴需要什么手续
  • 机动船舶缴纳车船税吗
  • 出售股份的印花税怎么做分录?
  • 原材料当废品卖怎么处理
  • 公司美元账户收到美元要交税吗
  • 向其他单位无偿提供服务的不需缴纳增值税
  • 建筑安装企业成本费用包括哪些
  • 已抵扣红字发票信息表怎么开
  • 停车场收入怎么做账
  • 网上办税大厅查询财务负责人?
  • 地税附加税分录怎么做?
  • 政府部门纳税人识别号查询
  • 企业清算企业所得税税率
  • 派遣公司乱扣钱没人管吗?
  • 库存商品在贷方怎么调回借方
  • 收到以前年度退回的企业所得税怎么做账
  • 工程施工开发票如何进行会计核算?
  • 企业收到科技创新发票
  • 计提本月短期借款利息1000元
  • 华为手机找回删除的通讯录号码
  • 在电脑上网页打不开怎么办
  • 对数据文件操作,进行数据记录的交换都要经过
  • 支付包装物押金为什么是其他应收款
  • 用银行存款支付本季度短期借款利息
  • linux入门学习
  • php解析url参数
  • PHP:imagepsslantfont()的用法_GD库图像处理函数
  • 收到原材料投资怎么做账
  • 每个建筑项目都有监理吗
  • 餐饮企业送餐等级标准
  • 小规模纳税人免税会计分录
  • 现金流量表补充资料怎么理解
  • vuex用法和原理
  • mkisofs命令
  • move命令移动文件夹下所有文件
  • 基于php判断客户是否存在
  • wordpress限制邮箱注册
  • 金蝶软件资产负债表怎么生成
  • 现金流量表的填写说明
  • 出口商品没有发票可以入收入吗
  • 为什么企业一定要上政企通
  • 新手搭建一个织布机
  • PostgreSQL中常用的时间日期脚本使用教程
  • mysql 扩展
  • mongodb聚合函数详解
  • 生产车间用电的进项税额可以抵扣吗
  • 旅游公司差额征税如何开票
  • 进项的加计抵减怎么算
  • 收到银行承兑汇票的账务处理
  • 扣发当月工资是什么意思
  • 年利率怎么算计算器
  • 怎么调整原材料的数量和单价
  • sqlserver高级教程
  • mysql mac安装教程
  • mysql常见报错
  • 在windows xp
  • win7如何打开远程桌面连接
  • win7无线无法连接怎么办
  • 免费升级windows10
  • 电脑开启虚拟wifi
  • windows7如何取消锁屏密码
  • dw导入excel
  • lrucache算法
  • django中的model
  • 场景转换的技巧
  • js怎么用jquery
  • 批处理应用实例
  • 性能优化报告
  • linux一些常用操作命令 (不定时更新)
  • 横向对比分析两个人关系的意义
  • 怎么打印纳税申报清单
  • 净缴税什么意思
  • 税控专用设备包括哪些
  • 工商变更与税务变更为什么不能同步
  • 卖钢材交哪些税
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设