百度地图API-动态运行画面
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百度地图API-动态运行画面相关的知识，希望对你有一定的参考价值。
<!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:50px; line-height: 50px; filter:alpha(Opacity=100); -moz-opacity:1; opacity:1; z-index:10000; background-color:lightblue;} #container{height:100%} .btn { background-color: green; color: white; display: inline-block; padding: 5px 12px; margin-bottom: 0; font-family: inherit; font-size: 13px; font-weight: 400; line-height: 1.53846154; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: 1px solid transparent; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075); box-shadow: inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075); -webkit-transition: all .8s cubic-bezier(.175,.885,.32,1); -o-transition: all .8s cubic-bezier(.175,.885,.32,1); transition: all .8s cubic-bezier(.175,.885,.32,1); } .btn:disabled { background-color: grey; } a.btn { text-decoration: none; background: #8BCB25; } </style> <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=xxx"></script> <?php $trackJson = CJavaScript::jsonEncode($trackArr); ?> <script type="text/javascript"> //解析数组 var trackJsonObj = $.parseJSON(‘<?php echo $trackJson;?>‘); var len = trackJsonObj.length; var points=[]; $.each(trackJsonObj , function(index , obj) { var point = new BMap.Point(obj.lng,obj.lat); points.push(point); }); var map; //百度地图对象 var car; //汽车图标 var label; //信息标签 var centerPoint; var timer; //定时器 var index = 0; //记录播放到第几个point var 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], 16); map.enableScrollWheelZoom(); map.addControl(new BMap.NavigationControl()); map.addControl(new BMap.ScaleControl()); map.addControl(new BMap.OverviewMapControl({isOpen: true})); var myIcon = new BMap.Icon("http://developer.baidu.com/map/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片 offset: new BMap.Size(0, -5), //相当于CSS精灵 imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。 }); //通过DrivingRoute获取一条路线的point var driving = new BMap.DrivingRoute(map); driving.search(points[0],points[len-1]); driving.setSearchCompleteCallback(function () { //得到路线上的所有point // points = 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); for(var i=0 , len=points.length ; i < len ; i++) { var marker = new BMap.Marker(points[i]); marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画 map.addOverlay(marker); } 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],{icon:myIcon}); 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 + "<br/>生成时间："+trackJsonObj[index].create_time); car.setPosition(point); index++; if (followChk.checked) { map.panTo(point); } if (index < points.length) { timer = window.setTimeout("play(" + index + ")", 600); } 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();" class="btn btn-edc-reset" disabled /> <input id="pause" type="button" value="暂停" onclick="pause();" class="btn btn-edc-reset" disabled /> <input id="reset" type="button" value="重置" onclick="reset()" class="btn btn-edc-reset" disabled /> <?php echo CHtml::link("返回",array("/userCenter/taskmonitoring/sa/view" , ‘id‘=>$tid), array(‘class‘=>‘btn‘));?> </div> <div id="container"></div> </body> </html>
以上是关于百度地图API-动态运行画面的主要内容，如果未能解决你的问题，请参考以下文章
百度地图javascript api怎么实现自定义标记然后将多个标记点连线起来