通过百度API回放经纬度记录的信息(DEMO)
来源:互联网 发布:star discover算法 编辑:程序博客网 时间:2024/05/20 20:22
废话少说,直接上代码:
<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>Track</title><style type="text/css">html{height:100%}body{height:100%;margin:0px;padding:0px}#controller{width:100%; border-bottom:3px outset; height:30px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;}#container{height:100%}</style><script type="text/javascript" src="http://api.map.baidu.com/api?v=1.5&ak=D2b4558ebed15e52558c6a766c35ee73"></script><script type="text/javascript">//获取所有点的坐标var points = [new BMap.Point(114.00100, 22.550000), new BMap.Point(114.00130, 22.550000),new BMap.Point(114.00160, 22.550000), new BMap.Point(114.00200, 22.550000),new BMap.Point(114.00300, 22.550500), new BMap.Point(114.00400, 22.550000),new BMap.Point(114.00500, 22.550000), new BMap.Point(114.00505, 22.549800),new BMap.Point(114.00510, 22.550000), new BMap.Point(114.00515, 22.550000),new BMap.Point(114.00525, 22.550400), new BMap.Point(114.00537, 22.549500)];var map; //百度地图对象var car; //汽车图标var label; //信息标签var centerPoint;var timer; //定时器var index = 0; //记录播放到第几个pointvar followChk, playBtn, pauseBtn, resetBtn; //几个控制按钮function init() {followChk = document.getElementById("follow");playBtn = document.getElementById("play");pauseBtn = document.getElementById("pause");resetBtn = document.getElementById("reset");//初始化地图,选取第一个点为起始点map = new BMap.Map("container");map.centerAndZoom(points[0], 15);map.enableScrollWheelZoom();map.addControl(new BMap.NavigationControl());map.addControl(new BMap.ScaleControl());map.addControl(new BMap.OverviewMapControl({isOpen: true}));//通过DrivingRoute获取一条路线的pointvar driving = new BMap.DrivingRoute(map);driving.search(new BMap.Point(114.00100, 22.550000), new BMap.Point(113.95100, 22.550000));driving.setSearchCompleteCallback(function() {//得到路线上的所有pointpoints = driving.getResults().getPlan(0).getRoute(0).getPath();//画面移动到起点和终点的中间centerPoint = new BMap.Point((points[0].lng + points[points.length - 1].lng) / 2, (points[0].lat + points[points.length - 1].lat) / 2);map.panTo(centerPoint);//连接所有点map.addOverlay(new BMap.Polyline(points, {strokeColor: "black", strokeWeight: 5, strokeOpacity: 1}));//显示小车子label = new BMap.Label("", {offset: new BMap.Size(-20, -20)});car = new BMap.Marker(points[0]);car.setLabel(label);map.addOverlay(car);//点亮操作按钮playBtn.disabled = false;resetBtn.disabled = false;});}function play() {playBtn.disabled = true;pauseBtn.disabled = false;var point = points[index];if(index > 0) {map.addOverlay(new BMap.Polyline([points[index - 1], point], {strokeColor: "red", strokeWeight: 1, strokeOpacity: 1}));}label.setContent("经度: " + point.lng + "<br>纬度: " + point.lat);car.setPosition(point);index++;if(followChk.checked) {map.panTo(point);}if(index < points.length) {timer = window.setTimeout("play(" + index + ")", 200);} else {playBtn.disabled = true;pauseBtn.disabled = true;map.panTo(point);}}function pause() {playBtn.disabled = false;pauseBtn.disabled = true;if(timer) {window.clearTimeout(timer);}}function reset() {followChk.checked = false;playBtn.disabled = false;pauseBtn.disabled = true;if(timer) {window.clearTimeout(timer);}index = 0;car.setPosition(points[0]);map.panTo(centerPoint);}</script></head><body onload="init();"><div id="controller" align="center"><input id="follow" type="checkbox"><span style="font-size:12px;">画面跟随</span></input><input id="play" type="button" value="播放" onclick="play();" disabled /><input id="pause" type="button" value="暂停" onclick="pause();" disabled /><input id="reset" type="button" value="重置" onclick="reset()" disabled /></div><div id="container"></div></body></html>
0 0
- 通过百度API回放经纬度记录的信息(DEMO)
- 借助百度api通过经纬度查询位置信息
- .通过百度API获取经纬度
- 通过百度API获取经纬度
- 通过百度地图API找到地址名的经纬度
- 通过百度地图API绘制经纬度map
- 通过百度地图API获取地址经纬度
- 百度地图通过经纬度获取地址信息
- 百度地图通过经纬度获取地址信息
- GPS项目\通过经纬度获取地址信息之百度地图API
- 百度地图API: 通过经纬度定位到百度地图位置
- 通过百度api实现通过经纬度反查省市区
- 通过某位置的经纬度获取周边百度地图POI的信息
- 用百度地图API获取的经纬度信息计算两点距离(Mysql函数)
- 通过百度API,搜索地名,实现地图和经纬度的查询
- 百度地图的反地址解析(通过经纬度查询地址信息)
- 百度地图API之根据经纬度查询地址信息(Android)
- 百度地图API之根据经纬度查询地址信息(Android)
- hive-列转行和行转列
- Elasticsearch Cheat Sheet
- IBM的云平台Bluemix使用初体验——创建Go语言 Web 应用程序,添加并使用语言翻译服务
- 什么是特征向量,特征值,矩阵分解
- CSS里的各种水平垂直居中基础写法心得
- 通过百度API回放经纬度记录的信息(DEMO)
- 简谈微信公众服务号的客服接口
- SparkSqlForTest
- hive参数调节
- GoldenGate for win安装配置
- 【cocos2d-x 3D游戏开发】1: 2D基础回顾---触摸事件(2.x)
- 利用webview加载帧动画
- Spark修炼之道(进阶篇)——Spark入门到精通:第十五节 Kafka 0.8.2.1 集群搭建
- 移动广告平台如何变得更具有价值?