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

  • 淘宝店怎么经营和推广(怎样经营淘宝店铺才赚钱)

    淘宝店怎么经营和推广(怎样经营淘宝店铺才赚钱)

  • 手机QQ群荣誉怎么设置(qq里的群荣誉怎么才能设置出来)

    手机QQ群荣誉怎么设置(qq里的群荣誉怎么才能设置出来)

  • vivox7隐藏图标密码忘了怎么解除(vivo隐藏图标的密码在哪里设置)

    vivox7隐藏图标密码忘了怎么解除(vivo隐藏图标的密码在哪里设置)

  • 手机没充电 为什么显示充电中(手机没充电 为什么显示充电中而且还能充电)

    手机没充电 为什么显示充电中(手机没充电 为什么显示充电中而且还能充电)

  • 华为手机锁屏广告怎么关闭(华为手机锁屏广告滑动解锁)

    华为手机锁屏广告怎么关闭(华为手机锁屏广告滑动解锁)

  • 微信朋友圈怎样才能发完整视频(微信朋友圈怎样发长视频)

    微信朋友圈怎样才能发完整视频(微信朋友圈怎样发长视频)

  • 手机壳影响散热吗(手机壳影响散热严重吗)

    手机壳影响散热吗(手机壳影响散热严重吗)

  • ipadmini2和mini3的区别(ipadmini2和mini3的内屏可以对换吗?)

    ipadmini2和mini3的区别(ipadmini2和mini3的内屏可以对换吗?)

  • 微信公众号分为哪几种类型(微信公众号的用途)

    微信公众号分为哪几种类型(微信公众号的用途)

  • win10重置后很卡怎么办(window10系统重置卡了)

    win10重置后很卡怎么办(window10系统重置卡了)

  • 华为nova4电池容量(华为nova4电池容量80%需要换电池吗)

    华为nova4电池容量(华为nova4电池容量80%需要换电池吗)

  • 怎样把qq聊天记录转发(怎样把qq聊天记录导出来)

    怎样把qq聊天记录转发(怎样把qq聊天记录导出来)

  • 华为p30数字耳机功能(华为手机数字耳机)

    华为p30数字耳机功能(华为手机数字耳机)

  • 创建的QQ群自己消失了(qq自己创建的群怎么群寻找群号)

    创建的QQ群自己消失了(qq自己创建的群怎么群寻找群号)

  • 3840x2160分辨率是几k(3840x2140分辨率)

    3840x2160分辨率是几k(3840x2140分辨率)

  • 华为荣耀20手机怎么截屏(华为荣耀20手机克隆在哪里)

    华为荣耀20手机怎么截屏(华为荣耀20手机克隆在哪里)

  • 酷狗怎样开启桌面歌词(酷狗音乐怎么开启桌面)

    酷狗怎样开启桌面歌词(酷狗音乐怎么开启桌面)

  • 黑鲨语音助手怎么打开(黑鲨 语音助手)

    黑鲨语音助手怎么打开(黑鲨 语音助手)

  • 韩剧TV如何使用(韩剧tv软件怎么样)

    韩剧TV如何使用(韩剧tv软件怎么样)

  • 手机怎么拍太阳(苹果手机怎么拍太阳)

    手机怎么拍太阳(苹果手机怎么拍太阳)

  • 抖音如何拉到最底部(抖音怎么把人拉高拉瘦)

    抖音如何拉到最底部(抖音怎么把人拉高拉瘦)

  • 为什么用wps发文件是个链接(为什么用wps发文件会有wps的标签)

    为什么用wps发文件是个链接(为什么用wps发文件会有wps的标签)

  • 鸿蒙怎么删除路由器? 鸿蒙系统删除控制中心的路由器的技巧(如何删除鸿蒙)

    鸿蒙怎么删除路由器? 鸿蒙系统删除控制中心的路由器的技巧(如何删除鸿蒙)

  • 最好的版本是什么?适合Linux新手的2017最佳发行版(市面最高版本)

    最好的版本是什么?适合Linux新手的2017最佳发行版(市面最高版本)

  • 买电脑主要看什么,需要注意些什么(买电脑主要看什么?)

    买电脑主要看什么,需要注意些什么(买电脑主要看什么?)

  • 小型微利企业所得税计算公式2023
  • 财务软件按什么排序
  • 资本公积转增资本的要求
  • 会计信息采集每年都要采集吗
  • 清包工可以有一部分小料吗
  • 国际机票可以抵扣进项税吗
  • 个税申报了还要扣钱吗
  • 税控技术维护费每年都能抵扣吗
  • 无偿划拨资产的入账价值
  • 产权转移书据印花税分录
  • 过路费报销单怎么填写图片
  • 核定征收个体户个人经营所得税
  • 2019招标费用收取标准
  • 预存送返利的帐户怎么查
  • 企业将自用设备进行出租
  • 工程项目企业座谈会新闻稿件
  • 代办会议费是否允许差额纳税
  • 正规沙场需要缴纳税吗
  • 为什么算除税价不算税金
  • 水利建设专项收入怎么计算
  • 延期缴纳税款的条件是什么
  • 小规模增值税本期免税额怎么计算
  • 预支差旅费的会计科目
  • 商业承兑汇票风险
  • 外资企业税率是多少
  • 无法收回的款项摘要怎么写
  • WIN10专业版永久激活
  • 房租发票需要缴房产税吗
  • 财政补贴会计入养老金一起发放吗
  • php在apache中有哪些工作方式
  • 资本溢价是
  • windows商店下载不了
  • 简单谈谈中国法律史的感受
  • 材料委托加工
  • 技术服务费可以计入成本吗
  • 蜜蜂皇vs
  • 摇树的英文是什么
  • 手把手教你如何从一无所有到财务自由
  • 模式识别与图像处理能做什么
  • 材料合理损耗会计处理
  • thinkphp框架怎么用
  • 机械租赁公司月薪多少
  • okr开源软件
  • 出口结汇有哪些常用方法?
  • 委外加工怎么盘点
  • SQL Server 2005 DTS导入平面数据出现错误解决方案
  • 企业收到投资款应贷记什么账户
  • 员工食堂买菜怎么写分录
  • 长期挂账应付款的处理方法
  • 网络平台服务商
  • 简易计税开具的发票取得的进项可以抵扣嘛
  • 收入分成的账务处理
  • 化肥贸易行业
  • 年底结账会计要怎么做账
  • 超市被盗怎么办
  • 同一个法人的两家企业可以进行互相开票吗
  • mysql数据库-数据库和表的基本操作
  • mysql 的replace into实例详解
  • 在linux操作系统中,/etc/rc.d/init.d
  • win10一天更新几次
  • win10怎么查看windows版本
  • service.exe是什么
  • win10关机快捷键
  • linux扩容inode
  • linux的curl
  • win10 win+l
  • 缩放打印到一张a4纸上设置
  • opengl mfc
  • cocos2dx 3.0 quick lua transition action
  • 在动画制作中一般默认帧数选择为
  • json和ui
  • 用Python设计一个游戏
  • unity3d速成
  • shell脚本 \r
  • python语言文件
  • jquery如何实现轮播图
  • 国税局定额发票查询
  • 为什么医保的钱可以取出来
  • 城市建设维护税减免政策
  • 电子秒表怎么读数9:33.12
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设