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.
随机推荐
关于this,super的来源猜想
this:this可以在成员函数中引用,调用成员函数函数,一般都是 obj.fun(): 这个成员函数的执行者就是当前类的对象, 所以,this应该是由此传递的. super:相对于this, 却不应 ...
ZOJ 3798--解题报告
题目相关: 3798相关链接: http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5330 Alice和Bob玩数字游戏, 这次Al ...
poj3254
还是那句老话:dp关键在状态: 求有多少种排布方式,是任意两头牛不相邻(有些地方不能放): 不用心,一开始还纠结了半天 和之前USACO上某题方法是一样的,每一行放或不放只有两种情况 把它当作一个二进 ...
Tomcat服务器启动常见问题
参考:http://www.cnblogs.com/xdp-gacl/p/3729033.html 学习web开发,需要先安装一台web服务器,然后再在web服务器中开发相应的web资源,供用户使用浏 ...
使用Unidac内置连接池
第一步: 放一个TUniconnection并设置相关属性 之后直接使用TUniconnection对象即可 跟踪unidac源码uni单元1540行中可以看到 Connect方法调用CreateIC ...
Project Euler 66: Diophantine equation
题目链接 思路: 连分数求佩尔方程最小特解 参考博客 模板: LL a[]; bool min_pell(LL d, LL &x, LL &y) { LL m = floor(sqrt ...
Qt之QTreeWidget入门
QTreeWidget的一些基本操作 1.insertTopLevelItems,insertTopLevelItem用来添加顶层的item QTreeWidget *treeWidget = new ...
EL表达式的特性
一.EL(Expression Language)表达式语言一.作用:从作用域中取值,再将值显示给客户 二.目的:在JSP中消灭java代码 三.使用:
JMeter&#160;参数化之利用CSV&#160;Data&#160;Set&#160;Config从文件读取参数并关联变量
参数化之利用CSV Data Set Config从文件读取参数并关联变量 by:授客 QQ:1033553122 1. 添加CSV Data Set Config 右键线程组->配置元 ...
linux基础命令---显示进程ps
ps ps指令可以显示系统中当前进程的信息,它的输出结果是高度可定制的.如果您希望重复更新所选内容和显示的信息,请使用top(1)代替. 请注意,“ps-aux”与“ps aux”不同.POSIX和U ...
android百度地图箭头,百度地图API绘制带头箭头的折线相关推荐
- 百度地图轨迹开发,如何绘制带有箭头的折线
最近在开发百度地图时,需要绘制行人行走的轨迹,并在轨迹内使用箭头表示方向,和我们平常使用百度地图导航时一样,能通过箭头表示人行走的方向. 通过百度地图API,我们很容易能找到划线的方法P ...
- css画横线箭头_用CSS绘制三角形箭头
用CSS绘制三角形箭头.使用纯CSS,你只需要很少的代码就可以创作出各种浏览器都兼容的三角形箭头! CSS代码:/* create an arrow that points up */ div.arr ...
- 百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档 新建文档可以直接从官方 ...
- 百度地图js版api绘制几何图形覆盖物并保存数据库
百度地图js版api绘制几何图形覆盖物并保存数据库 你好!相信你看到这边文章的时候,我的方案,已经满足了你的需求: 1,在html5上调用web版百度地图api,绘制多边形,我项目的是绘制小区. 2, ...
- 百度地图android自定义文字,androidsdk | 百度地图API SDK
方式一:配置.sty样式ID // 地图View实例 private MapView mMapView; // 用于设置个性化地图的样式文件 private static final String C ...
- Android使用第三方SDK——百度地图
Android使用第三方SDK--百度地图 第一次用百度地图是在去年的8月中旬吧,当时是参加一个比赛,老师要求使用地图,然后就是百度,各种视频网站一顿搜啊(当时Android还没入门,就知道CV),最 ...
- android 仿百度地图,仿百度地图街景实现
使用过百度地图的同学知道,它有个街景功能,可以看到许多地方的实景.这里就其街景内容的实现,进行下学习. 在百度地图SDK的官网上可以看到,百度对开发者提供了很多相关的内容,方便我们进行学习.关于SDK ...
- Android百度地图(一):百度地图定位sdk 类方法参数、定位原理详细介绍
***转载.引用请标明出处*** http://www.jianshu.com/p/29ccac3e1e42 本文出自[zhh_happig的简书博客](http://www.jianshu.com/ ...
- 基于android的百度地图_百度的71个炸天的开源项目
本文为大家整理了百度开源的70+项目,看看有没有感兴趣的. 1.JavaScript图表库 ECharts ECharts开源来自百度商业前端数据可视化团队,基于html5 Canvas,是一个纯Ja ...
最新文章
- 四位先行进位电路逻辑表达式_计算机硬件基础:二进制半加器、全加器与加法电路...
- mysql 分发_装配MySQL源代码分发
- 转 推荐 33 个 IDEA 最牛配置,写代码太爽了!
- vlan指的是什么?—Vecloud微云
- Material Design
- pyDash : Linux 性能监测工具
- C语言两班平均成绩,用C语言编程平均分数
- 牛客练习赛46T1-华华教奕奕写几何【数学】
- 科目三夜考考试内容及过关攻略
- 2019 PC 台式机垃圾佬 记录
- CompoundButton.OnCheckedChangeListener与RadioGroup.OnCheckedChangeListener冲突
- 自注意力 self-attention 笔记
- css 缩小图片后,图片变模糊的解决办法
- 西安80转2000坐标系重新定义投影
- 网站建设的流程及步骤是什么?
- springboot 第十九节 starter and muti_datasource 多数据源
- 如何找到算法的时间复杂度
- 哪里东西更便宜?读《卧底经济学(珍藏版)》
- 我有酒,你有故事吗?
- java hbase 批量查询数据_java Hbase 批量读取