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

  • 诺基亚900恢复出厂设置(诺基亚900怎么样)(诺基亚920t重置手机)

    诺基亚900恢复出厂设置(诺基亚900怎么样)(诺基亚920t重置手机)

  • oppok5是不是5g网络手机(oppok5支不支持5g)

    oppok5是不是5g网络手机(oppok5支不支持5g)

  • 2020年ipadmini2还能用吗(ipadmini2现在怎么样)

    2020年ipadmini2还能用吗(ipadmini2现在怎么样)

  • 红米note8截屏快捷键(redmi note8截屏快捷键)

    红米note8截屏快捷键(redmi note8截屏快捷键)

  • 如何隐藏文件夹别人都看不到(win7如何隐藏文件夹)

    如何隐藏文件夹别人都看不到(win7如何隐藏文件夹)

  • 华为手机屏保怎么关闭(华为手机屏保怎么设置时间)

    华为手机屏保怎么关闭(华为手机屏保怎么设置时间)

  • wpssmartart在哪里找(wps上的smartart在哪)

    wpssmartart在哪里找(wps上的smartart在哪)

  • 苹果se手写输入法在哪里设置(苹果se手写输入怎么设置)

    苹果se手写输入法在哪里设置(苹果se手写输入怎么设置)

  • 抖音下载功能怎么开启(抖音下载功能怎么关闭掉)

    抖音下载功能怎么开启(抖音下载功能怎么关闭掉)

  • QQ已经实名认证了为什么还是限制时间(qq已经实名认证了为什么还有防沉迷)

    QQ已经实名认证了为什么还是限制时间(qq已经实名认证了为什么还有防沉迷)

  • qq打卡什么时候开始的(qq打卡什么时候可以打卡)

    qq打卡什么时候开始的(qq打卡什么时候可以打卡)

  • 手机卡托是什么(手机卡托是什么金属材质)

    手机卡托是什么(手机卡托是什么金属材质)

  • 双面插数据线叫什么(双面插数据线叫什么名字)

    双面插数据线叫什么(双面插数据线叫什么名字)

  • word目录链接怎么弄(word目录链接怎么更改域代码)

    word目录链接怎么弄(word目录链接怎么更改域代码)

  • 手机怎么看中央5台(手机怎么看中央一台节目)

    手机怎么看中央5台(手机怎么看中央一台节目)

  • p30pro是曲面屏吗(p30pro是曲面屏还是瀑布屏)

    p30pro是曲面屏吗(p30pro是曲面屏还是瀑布屏)

  • web前端是啥意思(前端web是什么意思)

    web前端是啥意思(前端web是什么意思)

  • 明日方舟怎么删号(明日方舟怎么删除好友)

    明日方舟怎么删号(明日方舟怎么删除好友)

  • qq钱包交易记录恢复(qq钱包交易记录可以查几年)

    qq钱包交易记录恢复(qq钱包交易记录可以查几年)

  • win10如何修改硬盘格式(win10怎么改硬盘)

    win10如何修改硬盘格式(win10怎么改硬盘)

  • 链家app如何看降价房(链家降价房源怎么查看)

    链家app如何看降价房(链家降价房源怎么查看)

  • 苹果7p有原彩显示吗(苹果7p原彩显示怎么没有)

    苹果7p有原彩显示吗(苹果7p原彩显示怎么没有)

  • 充电线外面的橡胶开了(充电线外面的橡胶开了用黑色胶)

    充电线外面的橡胶开了(充电线外面的橡胶开了用黑色胶)

  • 怎么连接手柄(steam怎么连接手柄)

    怎么连接手柄(steam怎么连接手柄)

  • 欠费销号有什么影响(欠费销号可以申请回来吗)

    欠费销号有什么影响(欠费销号可以申请回来吗)

  • 全国增值税发票查询平台 手机版
  • 增值税期末留底退税政策解读
  • 3901100090的暂定税率
  • 进口关税怎么做分录
  • 交了9个点的工程增值税不可以抵扣吗
  • 上年数为负数,今年数为正数怎么算增减比率
  • 收到所得税退税怎么做账务处理
  • 企业给员工租的公寓楼都是什么样的
  • 办理外汇账户开户手续
  • 盈余公积要是提多了能转回么
  • 房地产销售土地增值税纳税人减免申请核准表
  • 跨年多计提社保个人部分怎么调整
  • 现金出资可以吗
  • 高管怎么样
  • 一张抵扣发票能分多次抵扣不
  • 支出凭证的日期
  • 将外购商品用于在建工程计入固定资产成本吗
  • 转销和冲销是什么意思
  • 内部调拨账务处理
  • 应付职工薪酬科目的应用
  • 怎样知道自己是否贫血
  • mac打印机状态暂停怎么处理
  • 跨年发票能不能报销
  • win10清空回收站是灰色的
  • php快递查询系统
  • 运行网络操作系统的设备
  • 代开增值税发票沒有付款怎么做账?
  • 固定资产付款流程
  • 应税消费品投资的筹划方法
  • 张家界天门山介绍简介
  • 浅谈一下新冠的好处
  • 微信账单可以打清单吗
  • 以前年度损益在报表哪里体现
  • 现金流量表企业所得税
  • php文件缓存类
  • discuzcms
  • 微擎框架源码
  • 帝国CMS根据不同会员组显示不同内容的方法
  • 个人发票抬头和公司发票抬头有什么区别
  • 中药和中药饮片有区别吗
  • 现金流量表编制格式
  • 业务活动成本和管理费用能不能写在一起
  • 进出车间管理规定适用
  • 购进交通运输设备怎么做账
  • 货款未转到公司怎么处理
  • 小规模纳税人免税怎么做账
  • 增值税进项税没抵扣
  • 飞机票抵扣进项税怎么填附表二
  • 弥补以前年度亏损报表怎么填
  • 研发费用 汇算清缴
  • 个人转让不动产交印花税吗
  • 主营业务成本暂估怎么算
  • 员工借款后离职怎么处理
  • 盘亏的固定资产是资产吗
  • 有形资产有哪些科目
  • 制造费用与辅助费用哪个先结转
  • 新办企业是不是企业
  • sqlserver获取数据库名
  • windowsserver2008r2standard激活
  • centos如何挂载fc存储
  • fedora系统安装教程
  • 如何利用批处理实现更改ip修改
  • Windows更新失败
  • mac新手必看教程
  • 在linux中使用什么命令可以执行shell脚本
  • hpm是什么格式的文件
  • linux终端有哪些
  • u3d怎么导入贴图
  • glCopyBufferSubData
  • 图文详解地理图册电子版
  • 列举linux常用的几个命令
  • 常用dos命令详解
  • jquery 元素
  • 设置拉我进群必须经过我同意
  • python中面向对象的概念
  • 广西地方税务局决算公开表
  • 安徽税务发票查询入口
  • 北京地方税务局李宗定
  • 报考地税局的要求是什么
  • 日本各界
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设