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 绘制轨迹历史相关推荐

  1. 百度地图API绘制轨迹

    百度地图Javascript API绘制轨迹 (首先贴两个网站: 1.百度地图API官方示例. 2.百度地图Javascript API v3.0参考类. 一.新建Html文档 新建文档可以直接从官方 ...

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

    源代码: body, html,#allmap {width: 100%;height: 100%;overflow: hidden;margin:0;} #l-map{height:100%;wid ...

  3. python画地图轨迹图_如何使用python在单张地图上绘制轨迹?

    我正在处理如下所示的数据帧.x和y是轨迹随时间变化的墨卡托x,y坐标.具有相同航向的行是属于同一轨迹的点.我们可以看到,所有0的行分隔了不同的轨迹.在VoyageID X Y Time 27 2 -7 ...

  4. 风场可视化:绘制轨迹

    引子 了解绘制粒子之后,接着去看如何绘制粒子轨迹. 源库:webgl-wind Origin My GitHub 绘制轨迹 在原文中提到绘制轨迹的方法是将粒子绘制到纹理中,然后在下一帧上使用该纹理作为 ...

  5. 百度地图api实现轨迹运动效果

    百度地图api实现轨迹运动效果 实现逻辑: 实现轨迹运动的效果无非就是将一段路程细化为很多个点,然后不过的根据这些点来画出移动轨迹. 实现流程: 1)使用DrivingRoute,根据起点和终点的位置 ...

  6. 百度地图API根据经纬度绘制轨迹图(Vue附源码)

    目录 导入百度地图 绘制轨迹 左侧点击事件添加窗口 页面完整代码 有用可以点个关注,收藏!! vue版本百度地图官方组件:https://dafrok.github.io/vue-baidu-map/ ...

  7. Java经纬度画轨迹图_利用百度地图JavaScript API绘制运动轨迹

    写在前面 欢迎访问我的博客 如果需要使用百度地图javasript api,需先进行开发者认证,balalalala写上一堆理由之后认证就行,然后创建浏览器端的应用,得到可用的Ak,详情见百度地图开放 ...

  8. js百度地图小车html,H5页面引用百度地图绘制车辆历史轨迹

    //打开百度地图 function openbMap(){ //模拟数据 var cars = {"car_5":[{"id":1,"order_id ...

  9. 根据经纬度坐标值在百度地图上绘制轨迹

    因为项目需要做物体轨迹检测,所以要把物体移动的轨迹在百度地图上进行绘制和显示,于是就在网上找到了这个方法,现在做个记录方便以后查阅: 1.html 部分设置存放地图的容器和设置你的百度地图的ak ht ...

最新文章

  1. coverity代码检测工具介绍_FOREPOST:一种使用反馈驱动学习软件测试的性能检测工具...
  2. 大数据在统计中的应用初探
  3. 关卡设计快速入门_3. 创建一个新关卡
  4. 中兴被禁在全球芯片市场掀起的波澜
  5. 【工具类】JAVA POI 代码导出表格的两种办法(代码全注释,小白也不怕)
  6. 深入了解Mybatis架构设计
  7. NumPy中的where()函数
  8. DOM-12 【模拟桌面待讲评】鼠标事件深入、点击与拖拽分离、双击事件
  9. html中文段落,HTML 段落-JavaScript中文网-JavaScript教程资源分享门户
  10. ideal如何快速导入import_Vue性能优化:如何实现延迟加载和代码拆分?
  11. java.util.Random 类的 nextInt(int num )
  12. An Add-in Bookmark for visual studio 2005
  13. 拓端tecdat|R语言时变波动率和ARCH,GARCH,GARCH-in-mean模型分析股市收益率时间序列
  14. Adopt Open JDK官方文档(八)OpenJDK 项目介绍
  15. word转换为pdf后图片失真的解决办法
  16. msm8953 uart配置
  17. BJTU 懒羊羊吃青草
  18. 星瞳科技 OpenMV 的使用
  19. Python操作*.cfg配置文件
  20. 环形队列、 条带环形队列 Striped-RingBuffer (史上最全)

热门文章

  1. Java RMI,Socket,HttpClient
  2. 深入理解 JVM Class文件格式(十)
  3. 51nod 1188 最大公约数之和 V2(欧拉函数)
  4. Codeforces Round #585 (Div. 2) F. Radio Stations 2-sat + 神仙建模
  5. 【CTSC2010】珠宝商【后缀自动机】【点分治】【根号分治】
  6. 斜堆学习笔记+复杂度证明
  7. CodeForces - 1189A ----Keanu Reeves
  8. NOI.AC-序列【堆】
  9. P1955-[NOI2015]程序自动分析【并查集,离散化】
  10. 【动态规划】农田个数 (ssl 1633)