美文网首页让前端飞
地图定位线点实现思路<无代码>

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

作者: 蓝海00 | 来源:发表于2022-03-09 14:31 被阅读0次

    需求

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

    实现

    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)

    相关文章

      网友评论

        本文标题:地图定位线点实现思路<无代码>

        本文链接:https://www.haomeiwen.com/subject/hrutdrtx.html