百度地图API绘制带头箭头的折线

源代码:

<!DOCTYPE html>
<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.4"></script>
        <title>绘制带有箭头的折线</title>
    </head>
    <body>
        <div id="allmap"></div>
    </body>
</html>
<script type="text/javascript">
    var map = new BMap.Map("allmap");
    var point = new BMap.Point(116.404, 39.915);
    map.centerAndZoom(point, 15);
    map.addControl(new BMap.NavigationControl());
    map.enableScrollWheelZoom();

    var lineList = new Array();//记录要绘制的线
    var arrowLineList = new Array();//记录绘制的箭头线
    var isFirstLoad = false;//是否是第一次加载,第一次加载不触发清除事件
    var arrowLineLengthRate = 15 / 10;//15是你初始时设置的地图显示范围,10是你初始时设置的箭头的长度,当地图放大缩小时保证箭头线长度一致

    var polyline = new BMap.Polyline([
        new BMap.Point(116.425, 39.91936),
        new BMap.Point(116.405, 39.920)
    ], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
    map.addOverlay(polyline);
    lineList[lineList.length] = polyline;//记录要绘制的线
    arrowLineList[arrowLineList.length] = addArrow(polyline,10,Math.PI/7);//记录绘制的箭头线

    var marker = new BMap.Marker(new BMap.Point(116.405, 39.920));  // 创建标注
    map.addOverlay(marker);               // 将标注添加到地图中
    marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画

    isFitstLoad = true;//第一次加载

    /**
     * 在百度地图上给绘制的直线添加箭头
     * @param polyline 直线 var line = new BMap.Polyline([faydPoint,daohdPoint], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
     * @param length 箭头线的长度 一般是10
     * @param angleValue 箭头与直线之间的角度 一般是Math.PI/7
     */
    function addArrow(polyline,length,angleValue){ //绘制箭头的函数
        var linePoint=polyline.getPath();//线的坐标串
        var arrowCount=linePoint.length;
        for(var i =1;i<arrowCount;i++){ //在拐点处绘制箭头
            var pixelStart=map.pointToPixel(linePoint[i-1]);
            var pixelEnd=map.pointToPixel(linePoint[i]);
            var angle=angleValue;//箭头和主线的夹角
            var r=length; // r/Math.sin(angle)代表箭头长度
            var delta=0; //主线斜率,垂直时无斜率
            var param=0; //代码简洁考虑
            var pixelTemX,pixelTemY;//临时点坐标
            var pixelX,pixelY,pixelX1,pixelY1;//箭头两个点
            if(pixelEnd.x-pixelStart.x==0){ //斜率不存在是时
                pixelTemX=pixelEnd.x;
                if(pixelEnd.y>pixelStart.y)
                {
                pixelTemY=pixelEnd.y-r;
                }
                else
                {
                pixelTemY=pixelEnd.y+r;
                }
                //已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法
                pixelX=pixelTemX-r*Math.tan(angle);
                pixelX1=pixelTemX+r*Math.tan(angle);
                pixelY=pixelY1=pixelTemY;
            }
            else  //斜率存在时
            {
                delta=(pixelEnd.y-pixelStart.y)/(pixelEnd.x-pixelStart.x);
                param=Math.sqrt(delta*delta+1);

                if((pixelEnd.x-pixelStart.x)<0) //第二、三象限
                {
                pixelTemX=pixelEnd.x+ r/param;
                pixelTemY=pixelEnd.y+delta*r/param;
                }
                else//第一、四象限
                {
                pixelTemX=pixelEnd.x- r/param;
                pixelTemY=pixelEnd.y-delta*r/param;
                }
                //已知直角三角形两个点坐标及其中一个角,求另外一个点坐标算法
                pixelX=pixelTemX+ Math.tan(angle)*r*delta/param;
                pixelY=pixelTemY-Math.tan(angle)*r/param;

                pixelX1=pixelTemX- Math.tan(angle)*r*delta/param;
                pixelY1=pixelTemY+Math.tan(angle)*r/param;
            }

            var pointArrow=map.pixelToPoint(new BMap.Pixel(pixelX,pixelY));
            var pointArrow1=map.pixelToPoint(new BMap.Pixel(pixelX1,pixelY1));
            var Arrow = new BMap.Polyline([
                pointArrow,
             linePoint[i],
                pointArrow1
            ], {strokeColor:"blue", strokeWeight:3, strokeOpacity:0.5});
            map.addOverlay(Arrow);
            return Arrow;
        }
    }

    //地图加载完毕事件
    map.addEventListener("tilesloaded",function(){
        //alert("地图加载完毕");
        if(!isFirstLoad){
            //map.clearOverlays();//清除所有的覆盖物
            //清除上一次绘制的箭头线,不清除上一次的箭头线,当地图放大时箭头线也会跟着放大
            for(var i=0; i<arrowLineList.length; i++){
                map.removeOverlay(arrowLineList[i]);//清除制定的覆盖物,可以是直线、标注等
            }
            arrowLineList.length = 0;
            //重新绘制箭头线
            for(var i=0; i<lineList.length; i++){
                arrowLineList[arrowLineList.length] = addArrow(lineList[i],15 / arrowLineLengthRate,Math.PI / 7);//记录绘制的箭头线
            }
        }
        isFirstLoad = false;
    });

    //单击获取点击的经纬度
    map.addEventListener("click",function(e){
        alert(e.point.lng + "," + e.point.lat);
    });
</script>

参考别人的代码进行修正后的效果,如图:

时间: 2024-11-08 21:36:31

百度地图API绘制带头箭头的折线的相关文章

百度地图API 绘制轨迹历史

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 6 &l

百度地图API,根据经纬度实现车辆移动轨迹绘制

百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连线起来,形成连贯的轨迹线路 4.生成下一个图标后删除上一个绘制的图标,形成小车移动动画感 5.本例使用的是临近的随机坐标点 6.初学者,欢迎大家交流学习 7.查看实例 代码: [html] view plain copy <!DOCTYPE html> <html> <head&

百度地图api,使用QT同时绘制多个标注

myMap.html     文件内容: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type=

Android应用中使用百度地图API定位自己的位置(二)

官方文档:http://developer.baidu.com/map/sdkandev-6.htm#.E7.AE.80.E4.BB.8B3 百度地图SDK为开发者们提供了如下类型的地图覆盖物: 我的位置图层(MyLocationOverlay):用于显示用户当前位置的图层(支持自定义位置图标): Poi搜索结果图层(PoiOverlay):用于显示兴趣点搜索结果的图层: 路线图层(RouteOverlay):公交.步行和驾车线路图层,将公交.步行和驾车出行方案的路线及关键点显示在地图上(起.终

百度地图API

本文我将从如何使用地图API(本文以百度为例,谷歌类似)开始,往后的扩展行的内容详见后续文章.1.打开链接http://developer.baidu.com/map/jshome.htm  这里有很多DEMO,或者你直接百度搜索“百度地图API”,第一个就是.进入后有很多方向供你选择,由于现在开源的地图API都是JS脚本写的,所以我上面的链接就只针对JAVASCRIPT进行介绍.  即使是编程菜鸟(像我这种),也知道当你在任何一个开发环境下写代码时,都需要加入头文件,例如,你要在C++里使用c

百度地图API —— 制作多途经点的线路导航

[百度地图API]如何制作多途经点的线路导航--驾车篇 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------------------------------------------------------------------------------------------ 一.创建地图 首先要告诉大家的是,API1.2版本取消密钥,取消服务设置,

百度地图API使用介绍

百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head> 3. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4. <title>Hello, World</title> 5. <sc

【百度地图API】如何制作多途经点的线路导航——驾车篇

转:http://www.cnblogs.com/milkmap/archive/2011/08/26/2154627.html 摘要: 休假结束,酸奶小妹要从重庆驾车去北京.可是途中要去西安奶奶家拿牛奶饼干呢!用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------------------------------------------------------------------------------------------

【百度地图API】怎样制作多途经点的线路导航——驾车篇

摘要: 休假结束,酸奶小妹要从重庆驾车去北京.但是途中要去西安奶奶家拿牛奶饼干呢! 用百度地图API,能不能帮我实现这个愿望呢? ------------------------------------------------------------------------------------------------------------------------ 一.创建地图 首先要告诉大家的是,API1.2版本号取消密钥,取消服务设置,大家能够採用更加简短的方式引用API的JS啦~ <s