![9979134fe7fd339e88f3d5de61e179d2.png](https://i-blog.csdnimg.cn/blog_migrate/585399120a72f3b46a5ce8f3b9329bef.jpeg)
实现效果大概如下
![0aec9cb4a5a9066863a95209c7822794.gif](https://i-blog.csdnimg.cn/blog_migrate/84d3923a4ee026c5cbc62d53f77b58ab.gif)
在官方的例子中marker的例子只有如下几种形式
![bd2b88959e9f931b226a7ee6d8b07f6d.png](https://i-blog.csdnimg.cn/blog_migrate/a96e0dad2e8942176d10b3213b475010.jpeg)
编码前
起初的设计是准备用一个marker和一个tips来做这个小功能扩展的,但是在做之前我突然发现marker和tips的出现形式貌似没有多大的区别,主要是因为怎么把两者连接起来,中间的那条线该如何实现,怎样做到两条线完美的对接起来,并且和tips关联,因为marker和tips的绘制都需要一个共同的参数经纬度,,,思考。。。。。。
权衡
最终方案和思路
最终决定放弃之前的想法,用一个marker来做,将tips里面的东西用定位跟marker进行关联起来,这样就不用关心两者之间的线到底如何连接起来了。
编码过程中注意事项:
- 简单动画的流畅程度,参数的调试
- css在绘制两条线的时候,其实是要通过三角函数进行简单的计算以后得到线另一根线在水平方向上面的偏移量和垂直方向上的偏移量
- 笔者就偷懒用肉眼对齐的方式进行对齐了
//最终编码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0,