记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

**

前言：

**
最近一直在做数据可视化方面的工作，其中平面可视化没什么难度，毕竟已经有很多成熟的可供使用的框架，比如百度的echart.js，highcharts.js等。还有就是3D可视化了，整体来说难度也还好，通过WEBGL技术一般的可视化效果还是很好实现，如果对于WEBGL光线渲染力不从心的话直接通过three.js来做也是很方便。

其实真正困扰我开发的是可视化项目中一般会存在很多基于地图方面的开发工作，只要是涉及到地图的可视化必然会跟经纬度相关联。如果是单纯获取地图上某个特定城市或者特定点的经纬度这个很好实现，通过 百度地图经纬度拾取系统 便可以很方便的获取到，但是这个系统只能是获取单个点的经纬度，并不能根据地图上的特定轨迹来拾取轨迹对应的经纬度信息。因为在实际开发过程中，地图可视化项目最多的还是在地图上绘制轨迹的需求。举个实际工作中遇到的需求，需要在某城市的地图上绘制出该城市所有地铁线路图，并且在对应站点展示高峰流量。这个需求中特定站点的绘制相对简单，可以通过上述讲的百度地图经纬度拾取系统来获取，但是对应的地铁轨迹的经纬度信息获取就蛋疼了，在网上查询了好久都没能够查询到（可以肯定的是网上肯定有，但是我就是查不到）。

针对上面所讲的困惑，我就有了想自己制作一个工具的想法，这个工具可以根据用户在地图上绘制的轨迹对应的将轨迹的经纬度信息保存并提供给用户，先不说这个想法是否能够帮助到其他人，至少能够满足我工作的需求。

工具原理说明：

1 用户在工具集成地图上绘制轨迹（点轨迹，圆轨迹，线轨迹，多边形轨迹，四边形轨迹）；
　　2 工具内部调用集成地图API获取绘制轨迹的经纬度信息；
　　3 将集成地图API返回的经纬度信息展示在工具对应的位置中，每次绘制玩一个轨迹就生成一条经纬度信息；
　　4 用户通过工具提供的查看轨迹详情按钮可以查看经纬度信息并且可以直接复制到自己项目中使用；
　　5 为了满足项目中一个需求包含多个轨迹的可能性，因此增加了一个合并轨迹经纬度信息的功能。

集成地图选型：

目前用户群体最大的两个地图是百度和阿里旗下的高德地图，经过比对最终还是选择了百度地图，因为百度地图API中有提供鼠标绘制工具DrawingManager，并且使用简单，API文档也比较完善。

工具界面设计：

既然集成地图选择了百度地图，那工具界面也就同百度地图界面，界面效果图具体如下：

工具实现代码说明：

1 dom结构说明：

1.1 main-div 为整体显示框架；
　　2.2 search-frame 用于存放搜索内容；
　　2.3 travel-frame 用于存放轨迹；
　　2.4 setting-frame 用于存放地图皮肤和鼠标绘制工具配置项内容；
　　2.5 allmap 用于存放百度地图。

1 <div class="main-div">
 2     <div class="search-frame">
 3         <div class="search">
 4             <input class="search-input" placeholder="请输入搜索关键字">
 5             <button class="search-btn"><i class="fa fa-search"></i></button>
 6         </div>
 7         <div class="search-info" style="max-height: 122px;"></div>
 8     </div>
 9     <!-- 轨迹 -->
10     <div class="travel-frame">
11               
12     </div>
13     <!-- 配置项 -->
14     <div class="setting-frame">
15         <div class="setting-content" style="">
16             <div class="setting-list map-theme">
17                 <p>地图皮肤配置</p>
18                 <div class="theme-content clearfix">
19                           
20                 </div>
21             </div>
22             <div class="setting-list">
23                 <p>地图绘制工具参数配置</p>
24                 <div class="list-content">
25                     <label>边线颜色</label>
26                 </div>
27                 <div class="list-content">
28                     <label>填充颜色</label>
29                 </div>
30                 <div class="list-content">
31                     <label>边线宽度</label>
32                 </div>
33                 <div class="list-content">
34                     <label>边线类型</label>
35             </div>
36         </div>
37         <div class="setting-operate">