WebGIS第八课：地图覆盖物-两点拖拽测距

这个应用很有实战意义，比如特斯拉的地图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()后面加上分号；

就好了。但是我看李老师的示例，确实没有啊，我就又把分号去掉了

这时候，我发现，地图bug就不存在了，好神奇啊，到底是什么鬼。

好吧 既然好了，就算是已经弄痛了这个案例。