WebGIS开发【智慧校园】实战案例：17. 地图覆盖物-两点拖拽测距

这个应用很有实战意义，比如特斯拉的地图APP，连个简单的测距报警都没有，这⼀直是我想要的功能。 

步骤如下： 

1. 创建两个点
2. 准备⼀条线
3. 准备文本
4. 计算距离

下面开始。

1）创建两个点 
采用赋值的方法直接创建之后可以调试⼀下，看是否正常显示。

2）创建⼀条线 
这⾥还是采用赋值来创建线，由于后续要根据点的位置动态调整线，所以这里先不给定具体坐标，只是 对样式进行规定。 

3）创建文本
就是用来显示距离的。这里也和线⼀样，他需要动态调整，到时候就显示在两点中间位置就行。

4）计算距离，就是根据两个点的经纬度来直接调用函数计算。可以写为函数。 
写为函数的好处是，不仅封装了计算过程，还可以结合前面线和文本来具体制定他们的位置。 

这就是最后做出来的效果，通过拖动点位，实时计算距离。 先把代码附上： 

<script> 
// 创建地图对象 
var map = new AMap.Map('container',{ center:[116.39,39.9], 
zoom:15, 
viewMode:'2D', 
    }) 
// 创建两个点 
var m1 = new AMap.Marker({ 
map:map, 
draggable:true, 
position:new AMap.LngLat(116.39,39.9), 
    }) 
var m2 = new AMap.Marker({ 
map:map, 
draggable:true, 
position:new AMap.LngLat(116.394,39.9), 
    }) 
// 根据覆盖物调整地图显示范围 
map.setFitView() 
// 准备⼀条线 
var line = new AMap.Polyline({ 
strokeColor:'#80d8ff', 
isOutline:true, 
outerlineColor:'white', 
    }) 
line.setMap(map) 
// 准备⼀个⽂本 
var text = new AMap.Text({ 
text:'', 
style:{ 
'background-color':'#29b6f6', 
'border-color':'#e1f5fe', 
'font-size':'16px', 
        }, 
    }) 
text.setMap(map) 
// 计算 
function compute(){ 
// 得到m1 和 m2 的经纬度 
var p1 = m1.getPosition() 
var p2 = m2.getPosition() 
// 将text⽂本显示在两个经纬度的中间 
var textPos = p1.divideBy(2).add(p2.divideBy(2)) //(p1+p2)/2 var dist = Math.round( p1.distance(p2) ) 
var path = [p1, p2] 
line.setPath(path) // 绘制线段 
text.setText('距离为'+dist+'⽶') 
text.setPosition(textPos)
     } 
compute() 
m1.on('dragging',compute) m2.on('dragging',compute) 
</script> 

这⾥需要注意的是，在compute函数里，先是计算了m1和m2两点的距离，然后⼜计算了线段和文本的位置。 
函数定义好之后，通过调用，来获取线段和文本的显示。 
之后，给两个点的拖动事件绑定函数，这样每次拖动之后，线段和文本就是实现了动态更新。 

PS这⾥出现了个小bug，就是拖动点位后，线段和⽂本不更新！ 
找了半天解决方案，发现是需要在compute()后⾯加上分号就好了。