Call Baidu Map API to achieve the path of the track playback function is actually very simple, as long as understand the following points can be:
1. Need to use Polyline method to draw a good road map first
2. Add a callout point with marker
3. Key step, by combining the timer, using the marker created by the callout point instance setposition change the location of the labeling point, to achieve playback function
Code sharing, direct copy to use
[HTML]View Plaincopy
- <! 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=);-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">
- Get the coordinates of all points
- 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; Baidu Map Object
- var car; Car icon
- var label; Information labels
- var CenterPoint;
- var timer; Timer
- var index = 0;//record played to the first point
- var followchk, playbtn, pausebtn, resetbtn; Several control buttons
- function init () {
- followchk = document.getElementById ("Follow");
- playbtn = document.getElementById ("Play");
- pausebtn = document.getElementById ("pause");
- resetbtn = document.getElementById ("reset");
- Initialize the map, select the first point as the starting point
- 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}));
- Get a point for a route via Drivingroute
- var driving = new Bmap.drivingroute (map);
- Driving.search (New Bmap.point (114.00100, 22.550000), New Bmap.point (113.95100, 22.550000));
- Driving.setsearchcompletecallback (function () {
- Get all the point on the route
- points = driving.getresults (). Getplan (0). Getroute (0). GetPath ();
- The screen moves to the middle of the start and end
- CenterPoint = new Bmap.point ((POINTS[0].LNG + points[points.length-1].lng)/2, (Points[0].lat + POINTS[POINTS.L Ength-1].lat)/2);
- Map.panto (CenterPoint);
- Connect All Points
- Map.addoverlay (New Bmap.polyline (points, {strokecolor: "Black", Strokeweight:5, strokeopacity:1}));
- Show small car
- label = new Bmap.label ("", {offset:new bmap.size (-20,-20)});
- car = new Bmap.marker (Points[0]);
- Car.setlabel (label);
- Map.addoverlay (car);
- Light action button
- 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 ("Longitude:" + point.lng + "<br> Latitude:" + 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 < span class= "attribute" >id= "follow" type=" checkbox "><span style= "FONT-SIZE:12PX;" > screen follow </span> </input>
- < Input id= "play" type=< Span class= "Attribute-value" > "button" value= "play" onclick= "play ();" disabled />
- <input < span class= "attribute" >id= "pause" type=" button " value=" pause " onclick= "pause ();" disabled />
- <input id="reset" type="button" value="reset" onclick="reset ()" Disabled />
- </div>
- <div id="container"></div>
- </body>
- </html>
Track playback with Baidu Map API
