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

源代码：

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;}

绘制带有箭头的折线

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

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

map.removeOverlay(arrowLineList[i]);//清除制定的覆盖物，可以是直线、标注等

}

arrowLineList.length = 0;

//重新绘制箭头线

for(var i=0; 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);

});

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

百度地图API 绘制轨迹历史

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

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

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

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

百度地图API的使用

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

百度地图api简单使用方法

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

百度地图API的使用方法

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

百度地图API开发指南

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

Android端百度地图API使用详解

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

百度地图API使用介绍

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

随机推荐

【Oracle XE系列之一】Windows10&lowbar;X64环境 安装Oracle XE11gR2 X64数据库

一.安装 1.去Oracle官网下载XE版的安装包[下载路径](Oracle Database Express Edition 11g Release 2 for Windows x64),解压. 2 ...

【BZOJ-3573】米特运输 树形DP

3573: [Hnoi2014]米特运输 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 1023  Solved: 604[Submit][Statu ...

CommonJS规范

CommonJS是一种规范,NodeJS是这种规范的实现.CommonJS是一 个不断发展的规范,计划将要包括如下部分: Modules Binary strings and buffers Char ...

单选按钮选中js的处理

function FinancialinfosetController($scope, $http, $timeout, $location, $rootScope, $routeParams) { ...

Winform mschart 动态绑定X时间表

效果图: 代码: using System; using System.Collections.Generic; using System.ComponentModel; using System.D ...

windows下git库的ssh连接，使用public key的方法

在windows下进行项目开发,使用git,通过ssh方式与git库连接,而ssh方式用public key实现连接. 首先需要下载mygit,安装后使用git bash.git bash(有GUI界 ...

C&num;在SharePoint文档库下动态新增文件夹

/// /// 在创建SP文库库下动态新增文件夹 /// ///

HTML 样式兼容不同设备类型

在项目中遇到在屏幕上显示的效果和打印时显示的效果不同,可以使用media属性来指定用于不同的媒介时使用的样式. media属性值: 值 描述 screen 计算机屏幕显示(默认) tty 电传打字机以 ...

【LOJ】&num;2041&period; 「SHOI2015」聚变反应炉

题解 这显然是一道题拆成两道 然后我胡乱分析了一波,决定第一题就用点度贪心(反正散播的能量肯定能被使用),然后过了 第二题开始mengbier 设\(f_u\)表示第u个点在父亲发动之后才发动的最小价 ...