百度地图给定两个经纬度坐标测算出他们之间的直线距离

09

2013
04

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css">
            body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;}
            #l-map{height:100%;width:78%;float:left;border-right:2px solid #bcbcbc;}
            #r-result{height:100%;width:20%;float:left;}
        </style>
        <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"> //百度地图引用工具
        </script>
        <script type="text/javascript" src="http://api.map.baidu.com/library/DistanceTool/1.2/src/DistanceTool_min.js"> //地图测算工具引用
        </script>
        <script type="text/javascript" src="js/jquery-1.5.1.min.js"> //引用js的jquery文件
        </script>
        <title>
            鼠标测距
        </title>
    </head>

    <body>
        <div id="allmap" style="width:800px;"> //显示地图的div层
        </div>
    </body>

</html>
<script type="text/javascript">
$(function() {
var map = new BMap.Map("allmap");

var point = new BMap.Point(102.705084, 25.05065); //地图中心点坐标，可以使用下面的map.centerAndZoom("昆明", 12); 以地区名定位中心点

map.centerAndZoom(point, 17);

window.map = map;

map.id = "bd";

map.enableScrollWheelZoom();

map.enableKeyboard();

map.addControl(new BMap.NavigationControl({

type: BMAP_NAVIGATION_CONTROL_SMALL

        })); //添加默认缩放平移控件
        map.centerAndZoom("昆明", 12); // 初始化地图,设置城市和地图级别。
        var pointA = new BMap.Point("102.93512", "25.10221"); //第一个坐标点

map.addEventListener("click", clickMap);

        function clickMap(e) {
            if (e.target == map.getOverlays()) {
                return;
            }
            var pointB = new BMap.Point(e.point.lng, e.point.lat); //点击后获取第二个点
            alert('坐标距离：' + map.getDistance(pointA, pointB) + '米'); //getDistance(pointA, pointB)测算两个点的距离
            var polyline = new BMap.Polyline([pointA, pointB], {
                strokeColor: "blue",
                strokeWeight: 6,
                strokeOpacity: 0.5
            }); //画出一条线

            //定义折线
            map.addOverlay(polyline);
        }
    });
</script>