第1关:绘制地图
任务描述
本关任务:使用JSP在百度地图上绘制一条共享单车起始路程。
相关知识
为了完成本关任务,你需要掌握:
如何创建地图实例;
如何在地图上绘制路程线。
创建地图实例
我们需要先在jsp中引入百度地图api。
效果如下:
给路程线设置标注和添加箭头
上图可以看到路程,但只有一条线并无法详细的向我们展示信息,因此我们可以通过给路程线添加标注位置和方向箭头。
绘制箭头
上图中,线段AB是路程线,只要绘制出CBD就可以实现箭头效果,为了灵活绘制箭头,需要用户自定义箭头的长度(r)和角度(angle)。
实现步骤如下:
变量定义:pixelStart(路程线起点坐标)、pixelEnd(路程线终点坐标)、r:(单位像素,并不是CB对应的箭头的长度,而是橘色线段对应的距离)、angle:箭头线((CB或者DB)与AB的夹角),函数定义为addArrow(polyline,r,angel):
首先要将AB两点的经纬度坐标转化成屏幕坐标
然后根据AB两点屏幕坐标以及r长度,计算绿色小绿点的屏幕坐标pixelTem。
再根据B点、小绿点的屏幕坐标及angle角度,计算出C,D两点的屏幕坐标
利用map的坐标转换方法,将C,D两点的屏幕坐标转成经纬度表示的坐标。
利用画线方法,绘制CBD折线。