天地图专题六：复杂操作，天地图上标注点的连线以及模拟点击事件

前面几篇文章主要是讲了加载天地图、在天地点上循环加载标注点并给标注点添加事件、根据标注点坐标确定地图的显示范围、在天地图显示坐标轨迹以及 在天地图上画多边形，电子范围。

 

本文再讲一点复杂操作。

1.在地图上展示一些标注点，这些标注点两两相连。 在线与不在线是两种不同颜色的图标。

2.如果标注点之间距离大于60千米，用红色虚线连接。如果标注点之间的距离小于60千米刚用蓝色虚线连接。

3.点击线条，在两个标注点显示两个标注点的距离，将两个点用实线连接。并且给相连的两个标注点大图标来表示，大图标也根据在线不在线使用不同的颜色。点击此标注点的时候，其他标注点恢复原状。

4.输入起点和终点，地图上连接两个点，并用实线连接两个点，两个点的图标用比较醒目的图标。

 

步骤：

1.准备数据。

点数据：

 

[javascript]  view plain   copy

 

1. //标注点数据  
2. var lnglats = [  
3. { "B":"23.2","L":"113.4","PName":"2222","Status":1},  
4. { "B":"23.7","L":"113.8","PName":"第四个点","Status":0},  
5. { "B":"23.1","L":"113.7","PName":"7777","Status":1},  
6. { "B":"23.5","L":"113.3","PName":"8888","Status":1}];  

让标注点两两相连。线条数据。这里手工添，也可以写个函数来生成。 注意这里数据的组织。

 

 

[javascript]  view plain   copy

 

1.               //两两相连的数据。第一个点和第二个点是一条线。第三个点和第四个点是一条线……依次类推  
2. var LinePoints = [  
3. { "B":"23.2","L":"113.4","PName":"2222","Status":1},  
4. { "B":"23.7","L":"113.8","PName":"第四个点","Status":1},  
5. { "B":"23.2","L":"113