百度地图Javascript API 使用记录

最新推荐文章于 2023-06-11 18:09:48 发布

原创最新推荐文章于 2023-06-11 18:09:48 发布 · 680 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #百度

本文记录了在使用百度地图JavaScript API时遇到的问题：在移动端无法获取标注点的屏幕坐标。分析了原因，即在移动端touch事件中clientX和clientY属性未定义。提出了解决方案，通过获取事件目标元素并调用getBoundingClientRect()来计算坐标。提供了示例代码供参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

API版本

GL

起因

在项目开发过程中对地图上的点标注，需要通过点击标注点，展示页面上的其他组件，此时需要将该标注点移动到其他位置（通过 `map`对象的 `panBy()`方法），此时就需要获取当前点击的标注点在屏幕上的坐标位置

Bug说明

在标注点的事件对象中，获取到的clientX、 clientY、offsetX、offsetY的值均为 undefined

原因分析

在web端中，鼠标点击事件可通过事件对象的 clientX, clientY 对象获取鼠标的位置

但在移动端，相对应地事件为 touch事件，通过对地图标注事件对象中获取到的clientX、clientY 属性为 undefined

当时项目运行在移动端

解决方案

通过获取事件对象的 target 属性获取 Element 元素，调用其 getBoundingClientRect()方法获取其 x,y,width,height等结果，计算得到其坐标位置

示例代码

 // labelMarker 对自定义的标注文本对象
 labelMarker.addEventListener('click', async (e) => {
   console.log(e)
   // 通过调用获取事件DOM对象的 获取在视口区域的位置
   const { x, y, width, height } = e.target.domElement.getBoundingClientRect()
   console.log(x,y,width,height)
   // 其他操作
 })