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

  • oppok9pro按键音怎么关闭(oppoa93s按键音)

    oppok9pro按键音怎么关闭(oppoa93s按键音)

  • 数据线往下压才能充电(数据线被压扁了怎么办)

    数据线往下压才能充电(数据线被压扁了怎么办)

  • 苹果8p建议升级13.5系统吗(苹果8p建议升级15.5吗)

    苹果8p建议升级13.5系统吗(苹果8p建议升级15.5吗)

  • 小米9不支持电信4g(小米9不支持电信网络)

    小米9不支持电信4g(小米9不支持电信网络)

  • 视频转场是什么意思(视频转场是什么软件)

    视频转场是什么意思(视频转场是什么软件)

  • 新注册微信要辅助验证过不了怎么办(新注册微信要辅助验证)

    新注册微信要辅助验证过不了怎么办(新注册微信要辅助验证)

  • 苹果散热不好怎么办(iphone散热不好影响电池寿命吗)

    苹果散热不好怎么办(iphone散热不好影响电池寿命吗)

  • 苹果7plusa1661是什么版本(iphone7plusa1661)

    苹果7plusa1661是什么版本(iphone7plusa1661)

  • 快手几级是什么意思(快手等级对应多少钱划分)

    快手几级是什么意思(快手等级对应多少钱划分)

  • 苹果se基带是高通的吗(iphone se2 基带)

    苹果se基带是高通的吗(iphone se2 基带)

  • cpu单核和多核的区别(cpu单核多核的区别)

    cpu单核和多核的区别(cpu单核多核的区别)

  • 云充吧可以在外地还吗(云充吧使用方法)

    云充吧可以在外地还吗(云充吧使用方法)

  • s60v3是什么手机(s60v3 fp1机型)

    s60v3是什么手机(s60v3 fp1机型)

  • 中文输入法的启动和关闭是用什么键(中文输入法的启动和关闭键是用什么键)

    中文输入法的启动和关闭是用什么键(中文输入法的启动和关闭键是用什么键)

  • 制冷量和制冷功率有什么区别(制冷量和制冷功率是一个意思吗)

    制冷量和制冷功率有什么区别(制冷量和制冷功率是一个意思吗)

  • ipad坏了怎么办(ipad被停用了之后怎么办)

    ipad坏了怎么办(ipad被停用了之后怎么办)

  • 华为mate30 5G版电池容量多少(华为mate305g版电池容量只有85%)

    华为mate30 5G版电池容量多少(华为mate305g版电池容量只有85%)

  • airpods卡顿严重解决方法(airpods老卡顿怎么办)

    airpods卡顿严重解决方法(airpods老卡顿怎么办)

  • 剪映怎么剪多余的视频(剪映怎么剪多余没有画面的音乐)

    剪映怎么剪多余的视频(剪映怎么剪多余没有画面的音乐)

  • qq怎么把文件发到手机(qq怎么把文件发送到邮箱)

    qq怎么把文件发到手机(qq怎么把文件发送到邮箱)

  • 华硕总部在哪(华硕总部哪里)

    华硕总部在哪(华硕总部哪里)

  • 手机淘宝小二在哪(手机淘宝的淘宝小二在哪里)

    手机淘宝小二在哪(手机淘宝的淘宝小二在哪里)

  • AirPods收纳盒掉电正常吗(airpods收纳盒后面的按钮)

    AirPods收纳盒掉电正常吗(airpods收纳盒后面的按钮)

  • oppor11更改储存位置(oppor11储存设置方法)

    oppor11更改储存位置(oppor11储存设置方法)

  • 安卓q是什么系统(安卓q版本是什么意思)

    安卓q是什么系统(安卓q版本是什么意思)

  • 三星锁屏广告怎么关闭(三星锁屏广告怎么去掉)

    三星锁屏广告怎么关闭(三星锁屏广告怎么去掉)

  • c语言中__cplusplus是什么(C语言中次方怎么表示)

    c语言中__cplusplus是什么(C语言中次方怎么表示)

  • 织梦dedecms如何批量导入关键词做内链优化(dede织梦怎么转成zblog)

    织梦dedecms如何批量导入关键词做内链优化(dede织梦怎么转成zblog)

  • 初级农产品免税原理
  • 资金预算表编制依据
  • 税法的分类都有什么
  • 盈余公积计提比例必须是10%么
  • 休产假个人部分社保公司怎么做账
  • 个税如何变更公司
  • 研发费用成本化和费用化
  • 期间损益结转错误怎么冲销
  • 废旧物资收购发票取消
  • 软件开发增值税免税吗
  • 车间购买灯会计怎么做账
  • 资产负债表中存货项目金额怎么算
  • 小微企业如何申请土地建厂房
  • 工业总产值填报原则
  • 企业在筹建期间发生的费用
  • 营改增对运输业的影响
  • 企业筹办期多久
  • 土地契税及印花税缴纳规定
  • 供应商已注销欠的发票怎么办?
  • 滴滴出行电子发票备注怎么写
  • 虚开增值税简单例子
  • 销售东西的物流叫什么
  • 投资类公司增资
  • 耳机插在电脑上有滋滋的声音
  • win101709密钥
  • auepuc.exe是什么软件
  • php中link什么意思
  • 购货折让会计分录
  • 阿里云onedata
  • php设计原则
  • Laravel 5.4向IoC容器中添加自定义类的方法示例
  • 流动资产损失
  • php file_get_contents smb
  • 固定资产加速一次性扣除
  • php中.的作用
  • 上市公司回购股票意味着什么
  • 企业汇算清缴后发现有多计提的成本
  • vue.js.
  • 数学建模回归模型例题
  • egi脑电数据处理
  • 试运行收入会计分录
  • python多进程间通信
  • 应收处理的两大内容是什么
  • 收入和成本的原则是什么
  • 固定资产折旧费计入成本吗
  • sql2008r2安装教程
  • 没进项发票的开销项发票多少税?
  • 兼职工资比正式工的工资高还是低
  • 公司注销前账务怎么处理好
  • 城镇土地使用税的计税依据
  • 营改增利息收入增值税
  • 股权转让需要出资吗
  • 营改增试点行业顺序
  • 多计提的折旧费怎么做账
  • 进口增值税已抵进项税额
  • 借款利息应计入
  • 个人社保和公积金
  • 研发支出费用化支出期末有余额吗
  • 资产减值损失如何计提
  • 企业设备维修
  • 短期借款利息计提分录怎么写
  • 什么是中型企业
  • 公司投资银行理财产品如何做账
  • 工业企业中制造费用包括哪些内容
  • centos crond
  • zmweb.exe是什么进程
  • win8.1安装程序无法确定支持的安装选项
  • win8.1怎么重新装系统
  • BUG: OpenGL error 0x0500 in -[CCEAGLView swapBuffers] 328
  • 实现原生的ajax
  • vuex详细教程
  • unity 内存管理
  • c# datetime.date
  • 工具类的作用
  • 最简单的十个菜
  • 人脸识别身份验证
  • 捐赠收费吗
  • 个人所得税子女教育和赡养老人抵扣多少税
  • 成品油和非成品油的税务知识
  • 湖南省国家税务局历任局长
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设