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

  • airpods pro敲击功能怎么设置(airpodspro敲击功能没了)

    airpods pro敲击功能怎么设置(airpodspro敲击功能没了)

  • 小米cc10什么时候出(小米cc10e还会出吗)

    小米cc10什么时候出(小米cc10e还会出吗)

  • 苹果4g变e怎么恢复(iphone的4g变成e咋回事)

    苹果4g变e怎么恢复(iphone的4g变成e咋回事)

  • qq群成员昵称太长怎么全显示(qq群成员昵称太多怎么办)

    qq群成员昵称太长怎么全显示(qq群成员昵称太多怎么办)

  • 荣耀v20有光学防抖动吗(荣耀v20有没有光学防抖)

    荣耀v20有光学防抖动吗(荣耀v20有没有光学防抖)

  • 淘宝退款成功了但是货收到了怎么办(淘宝退款成功了但是东西寄过来了)

    淘宝退款成功了但是货收到了怎么办(淘宝退款成功了但是东西寄过来了)

  • 手机自动退出程序是什么原因(手机自动退出程序怎么设置)

    手机自动退出程序是什么原因(手机自动退出程序怎么设置)

  • 手机丢了照片还能找回来吗(手机丢了,照片)

    手机丢了照片还能找回来吗(手机丢了,照片)

  • 华为8怎么隐藏应用(华为8怎么隐藏应用图标)

    华为8怎么隐藏应用(华为8怎么隐藏应用图标)

  • 闲鱼永久禁言怎么申诉(闲鱼永久禁言解除)

    闲鱼永久禁言怎么申诉(闲鱼永久禁言解除)

  • qq看点怎么关通知(qq看点功能怎么关闭)

    qq看点怎么关通知(qq看点功能怎么关闭)

  • tcp协议的主要功能(tcp协议的主要作用)

    tcp协议的主要功能(tcp协议的主要作用)

  • 多媒体的四个特点(多媒体的四个特性)

    多媒体的四个特点(多媒体的四个特性)

  • qq删了聊天记录还有吗(qq删了聊天记录别人登能看到吗)

    qq删了聊天记录还有吗(qq删了聊天记录别人登能看到吗)

  • oppo手机关机怎么关(oppo手机关机了怎么找到手机)

    oppo手机关机怎么关(oppo手机关机了怎么找到手机)

  • 如何去掉视频上的字(如何去掉视频上的字幕)

    如何去掉视频上的字(如何去掉视频上的字幕)

  • 云电脑有ios版的吗(云电脑有ios版下载)

    云电脑有ios版的吗(云电脑有ios版下载)

  • qqdiy怎么取消(qq怎么取消自己的所在地)

    qqdiy怎么取消(qq怎么取消自己的所在地)

  • 抖音里的逗拍在哪(抖音逗拍怎么找这功能)

    抖音里的逗拍在哪(抖音逗拍怎么找这功能)

  • 抖音的灵魂出窍怎么拍的(抖音的灵魂出窍在哪)

    抖音的灵魂出窍怎么拍的(抖音的灵魂出窍在哪)

  • win11的控制面板在哪?Win11控制面板里面找系统安全步骤(怎么打开win11的控制面板)

    win11的控制面板在哪?Win11控制面板里面找系统安全步骤(怎么打开win11的控制面板)

  • bearshare.exe进程安全吗 bearshare是什么进程

    bearshare.exe进程安全吗 bearshare是什么进程

  • SNP注释神器——VEP(生信)(ssms注释)

    SNP注释神器——VEP(生信)(ssms注释)

  • 基于OpenVINO在C++中部署YOLOv5-Seg实例分割模型(openvino使用)

    基于OpenVINO在C++中部署YOLOv5-Seg实例分割模型(openvino使用)

  • 哪些情形免征契税
  • 预付账款和应付账款的区别
  • 政府返还的个税怎么算
  • 出资款在现金流中怎么体现
  • 出租的土地使用权是无形资产吗
  • 负债的账面价值减去未来期间计算应纳税所得额
  • 个体户不足征是否要交房产税
  • 房产税的计税依据有哪些
  • 企业作为二房东要交什么税
  • 固定资产如何抵扣企业所得税
  • 非在职员工是什么意思
  • 营改增后预交营业税怎么处理
  • 培训费用可以开专票吗
  • 公司的私账合法吗
  • 个人申请税务局开技术服务发票如何收费
  • 春节公司发福利买什么东西
  • 物流行业主营业务成本会计分录
  • 产品售后产生材料费会计核算
  • 企业所得税和进项的关系
  • 清算结业是什么意思
  • 待认证进项税额转出会计分录
  • 无法找到脚本文件c:\windows\system32
  • 技术服务合同要盖骑缝章吗
  • window10系统有几种
  • 空调应该计入什么科目
  • 跟踪路由如何实现
  • linux format命令
  • 购入专利权的会计科目
  • neoDVDstd.exe - neoDVDstd是什么进程 有什么用
  • macos big sur值得升级吗
  • 直接材料成本差异账户在平时登记贷方登记
  • 担保赔偿准备金和未到期责任准备金实例
  • 税务的基本职能
  • 企业财务管理的对象是什么
  • 实现php框架系列功能
  • 公司向股东借款多久必须归还
  • 购入专利权属于
  • 申报系统异常
  • diff命令参数
  • 购买金税盘的费用会计分录
  • 自产产品用于福利账务处理
  • 不免征个人所得税的是个人转让著作权所得
  • 销售包装什么意思
  • 小规模纳税人公转私技巧
  • 程序员35岁 知乎
  • 固定资产的入账金额怎么算
  • 应收票据背书转让购买原材料
  • 车船税没有发票可以入账吗
  • 工会会计有工资么
  • 结转本月销售材料成本
  • MySQL修改root账号密码的方法
  • sql将两个表的数据合并
  • windows10创意者更新
  • Ubuntu上安装anaconda
  • win7开机出现标志后就重启
  • xp系统禁止程序联网
  • windows7开机
  • win8 chkdsk
  • windows8使用教程
  • 苹果mac系统怎么截屏快捷键
  • win7系统开机出现英文字母
  • win10更新中途怎么取消
  • win10怎么变回系统默认字体
  • linux中关闭系统命令
  • gnu grub卸载
  • 开始菜单里没有设置选项
  • jquery右击事件
  • 优质安卓应用
  • perl use of uninitialized
  • linux shell脚本中sudo后输入密码
  • unity进度条控制动画进度
  • javascript中的函数该如何理解
  • jquery并列选择器
  • java 同步方法和同步代码块区别
  • 查看shell脚本是否在运行
  • unity3D游戏开发
  • Dalvik VM (DVM) 与Java VM (JVM)之间有哪些区别
  • 陕西税务纳税服务平台
  • 小程序河南税务局
  • 小区活动宣传文案
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设