地图定位线点实现思路<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)

本文章由javascript技术分享原创和收集

发表评论 (审核通过后显示评论):