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

  • vivox70pro微云台怎么用(vivox70pro微云台防抖有用吗)

    vivox70pro微云台怎么用(vivox70pro微云台防抖有用吗)

  • 讯飞输入法怎么通过语音将其翻译成其他国家语言(讯飞输入法怎么直接发送表情包)

    讯飞输入法怎么通过语音将其翻译成其他国家语言(讯飞输入法怎么直接发送表情包)

  • 网站推广的常用办法(网站推广的方法有哪几种)

    网站推广的常用办法(网站推广的方法有哪几种)

  • 怎么检查手机是否中了木马(怎么检查手机是不是翻新机)

    怎么检查手机是否中了木马(怎么检查手机是不是翻新机)

  • 为什么都没有耳机孔了(为什么有些人耳朵没有耳垂)

    为什么都没有耳机孔了(为什么有些人耳朵没有耳垂)

  • b站的贝壳是怎么来的(b站的贝壳是怎么算的)

    b站的贝壳是怎么来的(b站的贝壳是怎么算的)

  • 微信二维码不小心重置了(微信二维码不小心发给别人了)

    微信二维码不小心重置了(微信二维码不小心发给别人了)

  • p40pro刷新率多少(华为p40pro刷新率是什么意思)

    p40pro刷新率多少(华为p40pro刷新率是什么意思)

  • 知乎浏览记录会被看到吗(知乎浏览记录会同步吗)

    知乎浏览记录会被看到吗(知乎浏览记录会同步吗)

  • 手机蓝牙可以连接多个设备吗(手机蓝牙可以连接几个蓝牙耳机)

    手机蓝牙可以连接多个设备吗(手机蓝牙可以连接几个蓝牙耳机)

  • cdy-an00是华为什么型号(华为cdy_an00怎么样)

    cdy-an00是华为什么型号(华为cdy_an00怎么样)

  • thunderbolt有什么用(thunderbolt 4×2)

    thunderbolt有什么用(thunderbolt 4×2)

  • 苹果手机怎么限制热点(苹果手机怎么限制热点使用人数)

    苹果手机怎么限制热点(苹果手机怎么限制热点使用人数)

  • 手机蓝屏是什么原因(手机蓝屏是什么原因怎么办)

    手机蓝屏是什么原因(手机蓝屏是什么原因怎么办)

  • vivo远程控制怎样设置(vivo手机怎样远程控制)

    vivo远程控制怎样设置(vivo手机怎样远程控制)

  • 华为mate20后台清理锁定

    华为mate20后台清理锁定

  • 复印机怎么扫描文件到电脑(复印机怎么扫描成电子版文件)

    复印机怎么扫描文件到电脑(复印机怎么扫描成电子版文件)

  • wps手机版怎么删除页面(wps手机版怎么删除空白页)

    wps手机版怎么删除页面(wps手机版怎么删除空白页)

  • 第一个结构化程序设计语言是什么(第一个结构化程序)

    第一个结构化程序设计语言是什么(第一个结构化程序)

  • ipados正式版什么时候发布(ipados 版本)

    ipados正式版什么时候发布(ipados 版本)

  • 红米k20支持无线充电吗(红米k20支持无线充电不)

    红米k20支持无线充电吗(红米k20支持无线充电不)

  • 手机定位找人怎么用(手机定位找人怎么找)

    手机定位找人怎么用(手机定位找人怎么找)

  • iphone8有必要贴膜吗(苹果8需要贴膜吗?)

    iphone8有必要贴膜吗(苹果8需要贴膜吗?)

  • 18pt发光是什么意思(发光,红色 18pt发光怎么设置)

    18pt发光是什么意思(发光,红色 18pt发光怎么设置)

  • C语言:如何在cmd命令窗口上玩贪吃蛇游戏(c语言 cmd)

    C语言:如何在cmd命令窗口上玩贪吃蛇游戏(c语言 cmd)

  • 【Linux】CUDA Toolkit和cuDNN版本对应关系(更新至2022年6月,附官网永久更新链接)(linux安装cuda的正确姿势)

    【Linux】CUDA Toolkit和cuDNN版本对应关系(更新至2022年6月,附官网永久更新链接)(linux安装cuda的正确姿势)

  • 含税价怎么算不含税价
  • 什么情况可以安排待岗
  • 年初未分配利润和年末未分配利润的关系
  • 抵扣联的抵扣期限
  • 公益机构可以收费吗
  • 建筑安装工程怎么缴税
  • 起征点与免征额的区别
  • 企业所得税中的不征税收入有哪些
  • 案例分析建筑业发展趋势
  • 关于国际货运代理协会联合会的描述不正确的是
  • 为什么盈利的企业也有可能发生债务危机
  • 历史成本重置成本属于会计是什么
  • 事业单位购买固定资产费自行
  • 用友u8计提企业所得税
  • 个税按工资薪金未按时申报的处罚规定
  • 小规模纳税人月销售额不超过10万免征
  • 往年个税申报数据查询
  • 办理房产证时契税完税证明图片怎么弄
  • 营改增后装饰公司税率
  • 在windows7中,使用鼠标拖放功能
  • 新会计准则下企业合并财务报表问题研究
  • 增值税税负率多少为正常
  • 应收账款的账务处理方式是什么
  • 代扣个税手续费返还增值税税率
  • 咋激活windows
  • 财务会计制度
  • 一篇不错的php基础论文
  • php字符串定义
  • php缩放图片
  • 公司承担的社保公积金怎么做账
  • linux init3
  • 程序员中秋节祝福语
  • 不动产抵债的销售额
  • 可供出售交易资产
  • YII Framework的filter过滤器用法分析
  • 给大家分享几个网站
  • Laravel+jQuery实现AJAX分页效果
  • 项目折现率计算公式
  • 包含个人社保的保险
  • 银行回单箱费会退回吗
  • phpvue开发模式
  • vue 生产环境
  • db2数据库备份文件为bkd格式
  • 怎么防止?
  • 劳务发票进什么科目
  • 一般纳税人商贸企业的税负是多少
  • 外购商品发给员工要交个税吗
  • 教育费附加计费单位
  • 固定资产没收到发票能折旧吗
  • 科目汇总表借方和贷方相等吗
  • 暂估入库有时间限制吗
  • 代开发票的弊端是如何体现的?
  • 哪些项目的进项可以抵扣
  • 租房子租一半不租了违约金付的,房东不肯退钱怎么办
  • 固定资产管理需要什么专业
  • 销售自己使用过的物品免税吗
  • 所附原始凭证的作用是
  • centos6.4下mysql5.7.18安装配置方法图文教程
  • mysql怎么把列变成行
  • 如何做电脑系统备份
  • win7系统禁止更新
  • 优麒麟 apk
  • mac m1读取ntfs
  • camrec是什么文件
  • windowsxp忘了登录密码
  • win7如何打开浏览器
  • 如何关闭win8自带杀毒
  • 安卓开发遇到的问题
  • node.js中的http.get方法使用说明
  • 慎用是能用还是不能用
  • 用js实现导航栏的下拉列表
  • jquery将文本框设置为只读
  • jquery源码解析
  • 动感相册模板
  • javascript基于什么的语言
  • 成都税务局网上办事大厅
  • 免除滞纳金的条件
  • 郑州市地税局局长
  • 税收优惠政策有什么公司受影响
  • 为什么进了网页不能登录
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设