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

  • 安卓手机怎样压缩文件(安卓手机怎样压缩)

    安卓手机怎样压缩文件(安卓手机怎样压缩)

  • 国家中小学网络云平台电视怎么看(国家中小学网络云平台下载app)

    国家中小学网络云平台电视怎么看(国家中小学网络云平台下载app)

  • 华硕笔记本如何进入bios界面(华硕笔记本如何进入U盘启动)

    华硕笔记本如何进入bios界面(华硕笔记本如何进入U盘启动)

  • excel怎么转化成word格式(EXcel怎么转化成表格)

    excel怎么转化成word格式(EXcel怎么转化成表格)

  • iPhone如何设置辅助触控功能(iphone辅助怎么设置)

    iPhone如何设置辅助触控功能(iphone辅助怎么设置)

  • qq上的幸运字符怎么弄(qq上的幸运字符怎么取消)

    qq上的幸运字符怎么弄(qq上的幸运字符怎么取消)

  • 怎样屏蔽对方qq(怎样屏蔽对方的信息)

    怎样屏蔽对方qq(怎样屏蔽对方的信息)

  • 电脑密码正确却显示密码错误怎么办(电脑密码正确却连不上wifi)

    电脑密码正确却显示密码错误怎么办(电脑密码正确却连不上wifi)

  • 打电话听不到声音是怎么回事(打电话听不到声音,微信发不了语音)

    打电话听不到声音是怎么回事(打电话听不到声音,微信发不了语音)

  • 红米k30关机键在哪(红米k30 关机键)

    红米k30关机键在哪(红米k30 关机键)

  • emui10.1什么时候出(emui10.1什么时候发布)

    emui10.1什么时候出(emui10.1什么时候发布)

  • 华为mate30保时捷版和Pro版的区别在哪里(华为MATE30保时捷配置)

    华为mate30保时捷版和Pro版的区别在哪里(华为MATE30保时捷配置)

  • 荣耀手环支持什么手机(荣耀手环什么时候出7)

    荣耀手环支持什么手机(荣耀手环什么时候出7)

  • vieal10是p9 plus吗(vir09)

    vieal10是p9 plus吗(vir09)

  • ip地址相同是在一起吗(ip地址怎么会相同)

    ip地址相同是在一起吗(ip地址怎么会相同)

  • 喵喵机怎么换纸(喵喵机怎么换纸A4)

    喵喵机怎么换纸(喵喵机怎么换纸A4)

  • 怎么调备忘录时间(备忘录设置)

    怎么调备忘录时间(备忘录设置)

  • vivoy93s支持无限充电吗(vivo y93s支持无线充电吗)

    vivoy93s支持无限充电吗(vivo y93s支持无线充电吗)

  • 七天网络未授权怎么弄(七天网络未授权什么意思)

    七天网络未授权怎么弄(七天网络未授权什么意思)

  • 记事本加密后在哪里找(记事本加密之后怎么看)

    记事本加密后在哪里找(记事本加密之后怎么看)

  • 美团砍价怎么生成二维码(美团砍价成功后在哪里看)

    美团砍价怎么生成二维码(美团砍价成功后在哪里看)

  • 抖音如何把视频和照片放一起(抖音如何把视频弄成合集)

    抖音如何把视频和照片放一起(抖音如何把视频弄成合集)

  • win10锁屏壁纸变黑白解决教程(win10锁屏壁纸模糊怎么回事)

    win10锁屏壁纸变黑白解决教程(win10锁屏壁纸模糊怎么回事)

  • Win11 截图工具崩溃原因,并称更多应用受影响(windows 11截图)

    Win11 截图工具崩溃原因,并称更多应用受影响(windows 11截图)

  • 增值税需要年度报税吗
  • 劳务发票要交多少税费
  • 自来水适用的税率是多少
  • 企业出现亏损的原因有哪些
  • 创立一个公司,公司的运营理念
  • 固定资产停止使用转入更新改造的会计处理
  • 企业想成为退税商店需具备哪些条件
  • 房地产开发企业增值税税率
  • 城市规划部门收取的市政建设配套费是否作为契税的征税基数
  • 应交消费税通过什么科目核算
  • 子女教育专项附加扣除是什么意思
  • 其他业务收入需要结转成本吗
  • 进项税额转出年末要结转吗
  • 3%征收率的应税服务
  • 坏账准备怎么冲回
  • 摊销合同取得成本分录
  • 主营业务收入明细账图片
  • 暂估入库会影响利润吗
  • 为什么有的发票没有发票章
  • 税后利润分配需要计提吗
  • linux怎么安装使用conda
  • 映泰主板bios设置硬盘启动
  • windows11怎么回退
  • mac废纸篓立即删除和清倒
  • win10锁屏壁纸自动更新
  • php stl
  • 酒店加盟管理费多少
  • 自然公园在哪
  • vue的自定义指令怎么用
  • 划拨建设用地使用权没有使用期限的限制
  • java项目中redis使用实例
  • php文件用什么运行
  • 补缴当年增值税税款和滞纳金如何记账
  • 英雄联盟轮转模式2020时间表
  • php file函数
  • phptime函数
  • php哪本书最好
  • 完善固定资产管理的方案
  • 小规模纳税人如何界定
  • 公司给买员工保险
  • 工程类什么情况下可以三方询价
  • 抵扣完进项怎么算应交增值税
  • 物业会计账务处理大全
  • 织梦cms要钱吗
  • 开具增值税专用发票是什么意思
  • 股东退股按什么退钱
  • 免征增值税的会计处理一般纳税人
  • 小规模没收入怎么报税
  • 冲减当期利润
  • 用现金券付房租违法吗
  • 费用减少利润减少的情况
  • 小规模纳税人销售要交税吗
  • 预付加油款收到发票怎么处理
  • 如何发放银行贷款利息
  • 购买的银行理财产品能提前赎回吗
  • 小企业购进商品怎么入账
  • 福利费与工会经费使用区别
  • 未完工的工程施工怎么处理
  • 购买工程物资能使现金流量变动吗
  • 刻章费发票怎么开
  • 一分钟教你
  • macair蓝牙用不了
  • iconindex什么意思
  • mscorsvw.exe是病毒吗
  • netsurf.exe - netsurf是什么进程 有什么用
  • redeonsoftware更新
  • windows 10 升级
  • linux系统安装驱动
  • jq拖拽div替换位置
  • Linux中scp命令获取远程文件的方法
  • bootstrap需要学多久
  • python设计作品
  • python如何获取
  • 云南省国家税务局
  • 白盘怎么开具红字专用发票
  • 免租期算租赁期限吗
  • 北京朝阳区地税局地址电话
  • 未到申报期可以提前抄税吗
  • 广东省税务机关规定小额零售需开发票吗
  • 房地产增值税怎么算举例说明
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设