百度地图描绘轨迹html,百度地图API 绘制轨迹历史
DOCTYPE html>
2
3
4
5
6
7 body, html{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}
8 #allmap{width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}
9 style>
10 script>
11 script>
12
13
车辆运行轨迹测试title>
14 head>
15
16
17 div>
18 body>
19 html>
20
21 $(function(){22 //初始化
23 drawGreenAddress(0,"red",4);24 //show_mycat($("#allmap_value").val(),list[index].Long,list[index].Lat);
25 })26
27 vartimer;//定时器
28 varindex= 0;//记录播放到第几个point
29 varlist=[30 {Long:106.652024,Lat:26.617221},31 {Long:106.652886,Lat:26.614185},32 {Long:106.652527,Lat:26.614314},33 {Long:106.652743,Lat:26.609469},34 {Long:106.654324,Lat:26.607531},35 {Long:106.65612,Lat:26.602556},36 ];37 varlistLast=list.length-1;38 //百度地图API功能
39 varmap= newBMap.Map("allmap");//创建Map实例
40 map.addControl(newBMap.NavigationControl());41 map.addControl(newBMap.ScaleControl());42 map.addControl(newBMap.OverviewMapControl({isOpen:true}));43 map.centerAndZoom(newBMap.Point(list[0].Long,list[0].Lat),15);//初始化地图,设置中心点坐标和地图级别
44 map.addControl(newBMap.MapTypeControl());//添加地图类型控件
45 map.enableScrollWheelZoom(true);//开启鼠标滚轮缩放
46
47 setTimeout(drawIcon,500);48 varcarMk;49 varmyBeginIcon= newBMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg",newBMap.Size(25,37), {imageOffset:newBMap.Size(0,0)});//人
50 varmyEndIcon= newBMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg",newBMap.Size(25,37), {imageOffset:newBMap.Size(0,0)});//人
51
52 //show_mycat("这里是地址",106.652024,26.617221);
53 //展示bd地址
54 varcar= "";55 functionshow_mycat(address,long,lat){56
57 if(car) map.removeOverlay(car)58 label= newBMap.Label(address, {offset:newBMap.Size(-20,-20)});59 car= newBMap.Marker(newBMap.Point(long,lat));60 car.setLabel(label);61 map.addOverlay(car);62 map.panTo(newBMap.Point(long, lat));63
64 }65
66 //显示原始路线
67 functiondrawGreenLine(i,color,weitht){68
69 varpolyline= newBMap.Polyline([70 newBMap.Point(list[i].Long,list[i].Lat),//起始点的经纬度
71 newBMap.Point(list[i+1].Long,list[i+1].Lat)//终点的经纬度
72 ], {strokeColor:color,//设置颜色
73 strokeWeight:weitht,//宽度
74 strokeOpacity:1});//透明度
75 map.addOverlay(polyline);76
77 }78
79 //获取路线
80 functiondrawGreenAddress(i,color,weitht){81
82 if(i%2==0){//不能太频繁请求百度地址,这里可能会改大
83 vargeoc= newBMap.Geocoder();84 geoc.getLocation(newBMap.Point(list[i].Long,list[i].Lat),function(rs){85 varaddComp=rs.addressComponents;86 address=addComp.province+addComp.city+addComp.district+addComp.street+addComp.streetNumber;87 $("#allmap_value").val(address)88 });89 }90 }91
92 functionlineAddress(i,color,weitht){93 drawGreenLine(i,color,weitht)94 drawGreenAddress(i,color,weitht)95 }96
97 functiondrawIcon(){98 if(carMk){99 map.removeOverlay(carMk);100 }101 carMk2= newBMap.Marker(102 newBMap.Point(list[0].Long,list[0].Lat),//起始点的经纬度
103 {icon:myBeginIcon});104 map.addOverlay(carMk2);105
106 carMk= newBMap.Marker(107 newBMap.Point(list[listLast].Long,list[listLast].Lat),//终点的经纬度
108 {icon:myEndIcon});109 map.addOverlay(carMk);110
111 for(vari=0;i
113 drawGreenLine(i,"green",4);114 }115
116 }117
118 //停止
119 functionstop() {120
121 if(timer) {122 window.clearTimeout(timer);123 }124 }125 //运行地图轨迹
126 functionplay(){127 if(index
130 show_mycat($("#allmap_value").val(),list[index+1].Long,list[index+1].Lat);131
132 timer=window.setTimeout("play(" +index+ ",'red',2)",500);133 index++;134
135 }136
137 }138
139
140 script>
百度地图描绘轨迹html,百度地图API 绘制轨迹历史相关推荐
- 百度地图API绘制轨迹
百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档 新建文档可以直接从官方 ...
- android百度地图箭头,百度地图API绘制带头箭头的折线
源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...
- python画地图轨迹图_如何使用python在单张地图上绘制轨迹?
我正在处理如下所示的数据帧.x和y是轨迹随时间变化的墨卡托x,y坐标.具有相同航向的行是属于同一轨迹的点.我们可以看到,所有0的行分隔了不同的轨迹.在VoyageID X Y Time 27 2 -7 ...
- 风场可视化:绘制轨迹
引子 了解绘制粒子之后,接着去看如何绘制粒子轨迹. 源库:webgl-wind Origin My GitHub 绘制轨迹 在原文中提到绘制轨迹的方法是将粒子绘制到纹理中,然后在下一帧上使用该纹理作为 ...
- 百度地图api实现轨迹运动效果
百度地图api实现轨迹运动效果 实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...
- 百度地图API根据经纬度绘制轨迹图(Vue附源码)
目录 导入百度地图 绘制轨迹 左侧点击事件添加窗口 页面完整代码 有用可以点个关注,收藏!! vue版本百度地图官方组件:https://dafrok.github.io/vue-baidu-map/ ...
- Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹
写在前面 欢迎访问我的博客 如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...
- js百度地图小车html,H5页面引用百度地图绘制车辆历史轨迹
//打开百度地图 function openbMap(){ //模拟数据 var cars = {"car_5":[{"id":1,"order_id ...
- 根据经纬度坐标值在百度地图上绘制轨迹
因为项目需要做物体轨迹检测,所以要把物体移动的轨迹在百度地图上进行绘制和显示,于是就在网上找到了这个方法,现在做个记录方便以后查阅: 1.html 部分设置存放地图的容器和设置你的百度地图的ak ht ...
最新文章
- coverity代码检测工具介绍_FOREPOST:一种使用反馈驱动学习软件测试的性能检测工具...
- 大数据在统计中的应用初探
- 关卡设计快速入门_3. 创建一个新关卡
- 中兴被禁在全球芯片市场掀起的波澜
- 【工具类】JAVA POI 代码导出表格的两种办法(代码全注释,小白也不怕)
- 深入了解Mybatis架构设计
- NumPy中的where()函数
- DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
- html中文段落,HTML 段落-JavaScript中文网-JavaScript教程资源分享门户
- ideal如何快速导入import_Vue性能优化:如何实现延迟加载和代码拆分?
- java.util.Random 类的 nextInt(int num )
- An Add-in Bookmark for visual studio 2005
- 拓端tecdat|R语言时变波动率和ARCH,GARCH,GARCH-in-mean模型分析股市收益率时间序列
- Adopt Open JDK官方文档(八)OpenJDK 项目介绍
- word转换为pdf后图片失真的解决办法
- msm8953 uart配置
- BJTU 懒羊羊吃青草
- 星瞳科技 OpenMV 的使用
- Python操作*.cfg配置文件
- 环形队列、 条带环形队列 Striped-RingBuffer (史上最全)
热门文章
- Java RMI,Socket,HttpClient
- 深入理解 JVM Class文件格式(十)
- 51nod 1188 最大公约数之和 V2(欧拉函数)
- Codeforces Round #585 (Div. 2) F. Radio Stations 2-sat + 神仙建模
- 【CTSC2010】珠宝商【后缀自动机】【点分治】【根号分治】
- 斜堆学习笔记+复杂度证明
- CodeForces - 1189A ----Keanu Reeves
- NOI.AC-序列【堆】
- P1955-[NOI2015]程序自动分析【并查集,离散化】
- 【动态规划】农田个数 (ssl 1633)