前面几篇文章主要是讲了加载天地图、在天地点上循环加载标注点并给标注点添加事件、根据标注点坐标确定地图的显示范围、在天地图显示坐标轨迹以及 在天地图上画多边形,电子范围。
本文再讲一点复杂操作。
1.在地图上展示一些标注点,这些标注点两两相连。 在线与不在线是两种不同颜色的图标。
2.如果标注点之间距离大于60千米,用红色虚线连接。如果标注点之间的距离小于60千米刚用蓝色虚线连接。
3.点击线条,在两个标注点显示两个标注点的距离,将两个点用实线连接。并且给相连的两个标注点大图标来表示,大图标也根据在线不在线使用不同的颜色。点击此标注点的时候,其他标注点恢复原状。
4.输入起点和终点,地图上连接两个点,并用实线连接两个点,两个点的图标用比较醒目的图标。
步骤:
1.准备数据。
点数据:
- //标注点数据
- var lnglats = [
- { "B":"23.2","L":"113.4","PName":"2222","Status":1},
- { "B":"23.7","L":"113.8","PName":"第四个点","Status":0},
- { "B":"23.1","L":"113.7","PName":"7777","Status":1},
- { "B":"23.5","L":"113.3","PName":"8888","Status":1}];
让标注点两两相连。线条数据。这里手工添,也可以写个函数来生成。 注意这里数据的组织。
- //两两相连的数据。第一个点和第二个点是一条线。第三个点和第四个点是一条线……依次类推
- var LinePoints = [
- { "B":"23.2","L":"113.4","PName":"2222","Status":1},
- { "B":"23.7","L":"113.8","PName":"第四个点","Status":1},
- { "B":"23.2","L":"113