百度地图API使用Example II

最新推荐文章于 2024-01-06 22:52:46 发布

白熊花田

最新推荐文章于 2024-01-06 22:52:46 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

分类专栏：百度地图API使用文章标签：百度地图百度地图API 取得距离连线

本文链接：https://blog.youkuaiyun.com/whiterbear/article/details/36663015

百度地图API使用专栏收录该内容

2 篇文章

订阅专栏

本文是百度地图API使用的第二部分，讲解如何利用API获取城市坐标，并通过Map类方法展示城市点，同时描绘城市之间的连线，实现地图上的可视化效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

百度地图API使用Example II

本文将介绍如何在地图上获取到两个城市的距离，以及将两个城市在地图上用弧线连起来。

上一篇博客中，我们看到了通过ip可以定位一个城市，能够获取到城市名，然后可以用Geocoder类的方法得到坐标点Point。这里的Point其实是一个对象，一个Point类型的对象，拥有经纬度的对象。有了坐标点Point我们就可以在地图上显示和mark一个城市了。

下面我们就看下如何计算两地之间的距离。

百度地图Map类提供了下面的方法：

方法	返回值	描述
getDistance(start:Point,end:Point)	Number	返回两点之间的距离，单位是米。(自 1.1 新增)

接着我们将得到的两个城市point放入弧线中并显示出来。

效果如图：

具体代码如下：

//得到两个城市的距离，并用弧线将其连接起来
    function getTimeandDraw() {
        var c1 = document.getElementById("Text1").value;
        var c2 = document.getElementById('Text2').value;
        var p1;
        var p2;
        var myGeocoder = new BMap.Geocoder();
        myGeocoder.getPoint(c1, function (point1) {
            p1 = point1;
            myGeocoder.getPoint(c2, function (point2) {
                p2 = point2;
                var distince = map.getDistance(p1, p2);
                var distanceBuf = (distince / 1000).toFixed(2).split(".");
                var mileage = distanceBuf[0] + "." + distanceBuf[1];
                document.getElementById("result").value = mileage;
                document.getElementById("resultmi").value = distince;
                var points = [p1, p2];

                var curve = new BMapLib.CurveLine(points, { strokeColor: "blue", strokeWeight: 3, strokeOpacity: 0.5 }); //创建弧线对象
                map.addOverlay(curve); //添加到地图中
                //alert(c1 + "与" + c2 + "距离为" + mileage + "公里");
            }, c1);
        }, c2);
    }

百度地图API学习和下载： http://developer.baidu.com/map/

源码下载：http://download.youkuaiyun.com/detail/whiterbear/7584709