地图定位线点实现思路<echarts><无代码>

需求

实现点击地图上的省份及撒的坐标点通过“折线”连接某个信息框

实现

  1. 获取鼠标坐标:echart点击事件里event参数里面<params.event>可以拿到鼠标基于当前地图盒子的x,y<offsetX, offsetY>
  2. “折线”实现:本质上是基于地图盒子上的一个看不见的盒子,宽高于地图盒子相等,根据相对定位里面有两个盒子分别扮演x于y轴上的"线"
  3. 如何相对定位:
    3.1 x 根据offsetX的值计算出x的宽度 offsetX-左边距离=x宽度 高度1px
    根据offsetY值配置当前x盒子距离父元素top值
    3.2 y 根据offsetY的值计算出y的高度 看不见盒子的高度-offsetY=y高度 宽度1px
    根据offsetY值配置当前y盒子距离父元素top值 左边距离可以默认配置(left)
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Label的作用是什么?是怎么用的 答案: label标签来定义表单控制间的关系当用户选择该标签时,浏览 器会自动...
    你会挽着我的衣袖吗阅读 2,962评论 1 0
  • 十五、焦点事件&键盘事件 1. 焦点事件 onfocus =>获得焦点事件 onblur=>失去焦点事件 <...
    默默_01cf阅读 1,469评论 0 0
  • ###CSS Cascading Style Sheets 层叠样式表 ---- ####css书写格式 ``` ...
    一通哥阅读 3,474评论 0 0
  • ####网页的布局方式Layout ####标准流: 1.定义: 标准流也叫文档流/普通流...
    一通哥阅读 3,808评论 0 0
  • (1)前端基础面试题 一、HTML 面试题 1、html 语义化? 阅读代码时能根据标签理解你的用意,便于阅读 方...
    Coder__T阅读 3,593评论 0 5