源代码：

<!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>

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

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

  1. 百度地图API 绘制轨迹历史

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

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

    百度地图,实现车辆轨迹绘制 实现思路: 1.根据经纬度实现车辆轨迹绘制 2.使用百度地图API的两个覆盖物实现,Polyline(折线)绘制轨迹,Marker(图标)绘制小车图标 3.将每两个坐标间连 ...

  3. 记录开发基于百度地图API实现在地图上绘制轨迹并拾取轨迹对应经纬度的工具说明

    前言: 最近一直在做数据可视化方面的工作,其中平面可视化没什么难度,毕竟已经有很多成熟的可供使用的框架,比如百度的echart.js,highcharts.js等.还有就是3D可视化了,整体来说难度也 ...

  4. 百度地图API的使用

    ------------------自说自话----------------------------- 好奇怪,习惯性使用有道云笔记记录心得与知识后就很少用博客园来记录了. 但是后来想想,有些东西还是 ...

  5. 百度地图api简单使用方法

    百度地图API的使用方法   百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html&g ...

  6. 百度地图API的使用方法

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

  7. 百度地图API开发指南

    简介什么是百度地图API? 百度地图API是一套由JavaScript语言编写的应用程序接口,它能够帮助您在网站中构建功能丰富.交互性强的地图应用.百度地图API包含了构建地图基本功能的各种接口,提供 ...

  8. Android端百度地图API使用详解

    百度地图API简介 百度地图移动版API(Android)是一套基于Android设备的应用程序接口,通过该接口,可以轻松的访问百度服务和数据,构建功能丰富.交互性强的地图应用程序. 百度地图移动版A ...

  9. 百度地图API使用介绍

    百度地图API 开始学习百度地图API最简单的方式是看一个简单的示例.以下代码创建了一个520x340大小的地图区域并以天安门作为地图的中心: 1. <html> 2. <head& ...

随机推荐

  1. 397. Integer Replacement

    先正统做法. public class Solution { public int integerReplacement(int n) { if(n == 1) return 0; int res = ...

  2. struts2 表单处理

    在这篇教程里我们将探究如何处理表单提交.本文例子介绍: javabean存储表单数据 在action中重写validate方法进行简单的校验 创建一个struts2表单并和javabean匹配 jav ...

  3. macos下使用rvm管理ruby版本和rails版本

    1. 安装rvm curl -L https://get.rvm.io | bash -s stable 查看rvm 版本 2. 安装ruby rvm install 2.3.1 查看ruby 版本 ...

  4. 用高德地图API 通过详细地址获得经纬度

    http://cloud.sinyway.com/Service/amap.html http://restapi.amap.com/v3/geocode/geo?key=xxxxxxxxxxxxxx ...

  5. 利用WinDriver开发PCI设备驱动程序

    摘要 WinDriver是Jungo公司出版的一个设备驱动程序开发组件,它可以大大加速PCI设备驱动程序的开发.作者在实际的项目中采用了WinDriver来开发设备驱动程序,取得了相当好的运行效果.从 ...

  6. uva 10718 Bit Mask(贪心）

    题目连接:10718 Bit Mask 题目大意:给出一个T, 和一个下限L, 上限R, 在[L, R]之间找一个数, 使得这个数与T做或运算之后的数值最大 输出这个数. 解题思路:将T转换成二进制, ...

  7. hdu 3586 Information Disturbing（树形dp + 二分）

    本文出自   http://blog.csdn.net/shuangde800 题目链接:   hdu-3586 题意 给一棵n个节点的树,节点编号为1-n,根节点为1.每条边有权值,砍掉一条边要花费 ...

  8. hdu 4651 Partition (利用五边形定理求解切割数)

    下面内容摘自维基百科: 五边形数定理[编辑] 五边形数定理是一个由欧拉发现的数学定理,描写叙述欧拉函数展开式的特性[1] [2].欧拉函数的展开式例如以下: 亦即 欧拉函数展开后,有些次方项被消去,仅 ...

  9. Java中NaN和-0.0f的比较问题

    简单的说,比较两个int型或long型的数据没有什么问题,可以用==来判断,但对浮点数(float与double)来说,需要对Float.NaN和0.0这个两个特殊数字作额外的处理.Float.NaN ...

  10. C++之枚举

    1. 声明枚举类型格式 enum Day{ Mon,Tue=5,Wed};//Mon=0;Tue=5;Wed=6 enumDay1{Mon1,Tue1,Wed1};//Mon1=0;Tue1=1;We ...