Baidu Map, to achieve vehicle trajectory mapping
Implementation ideas:
1. Vehicle trajectory mapping according to latitude and longitude
2. Using the Baidu Map API two overlay implementation, Polyline (polyline) Draw track, Marker (icon) to draw the car icon
3. Connect each of the two coordinates to form a coherent trajectory line
4. After the next icon is generated, delete the last drawn icon to create a car moving animation sense
5. This example uses an adjacent random coordinate point
6. Beginners, welcome everyone to exchange study
7. View the instance
Code:
[HTML]View PlainCopy
- <! DOCTYPE HTML>
- <html>
- <head>
- <meta http-equiv= "content-type" content= "text/html; Charset=utf-8 " />
- <meta name="viewport" content="initial-scale=1.0, User-scalable=no" />
- <style type="Text/css">
- Body, HTML, #allmap {width:100%;height:100%;overflow:hidden;margin:0;font-family: "Microsoft Jas Black";}
- </style>
- <script type="Text/javascript" src= "http://api.map.baidu.com/api?v=2.0&ak= E06EB9D756D0EAFC722EFFB355657B4C "></script>
- <title> Vehicle running trajectory Test </title>
- <script src="http://c.cnzz.com/core.php"></script></Head >
- <body>
- <div id="Allmap"></div>
- </body>
- </html>
- <script type="Text/javascript">
- var startlong = 106.652024;
- var startlat = 26.617221;
- var endlong = 106.652024;
- var endlat = 26.614221;
- var startlongr = 106.652024;
- var startlatr = 26.617221;
- var endlongr = 106.652024;
- var endlatr = 26.614221;
- var linespoints = null;
- Baidu Map API Features
- var map = new Bmap.map ("Allmap"); Create a map instance
- Map.centerandzoom (New Bmap.point (106.652024,26.617221), 15); Initialize map, set center point coordinates and map level
- Map.addcontrol (New Bmap.maptypecontrol ()); Add a Map type control
- Map.setcurrentcity ("Guiyang"); Set the city that the map displays this item is required to be set
- Map.enablescrollwheelzoom (TRUE); Turn On mouse wheel zoom
- SetInterval (goway,500);
- var carmk;
- var myicon = new Bmap.icon ("Http://sandbox.runjs.cn/uploads/rs/101/wmbvrxnx/kache.png", New Bmap.size (37,25) , {imageoffset:new bmap.size (0, 0)});//Truck
- function Goway () {
- Startlong = Endlong;
- Startlat = Endlat;
- Endlong = getround (endlong);
- Endlat = getround (Endlat);
- DrawIcon (Startlong,startlat,endlong,endlat);
- Drawredline ();
- }
- function Getround (temp) {
- var i = Math.Round (math.random () *9+1);
- if (i%2==0) {
- return temp + i*0.0001;
- }else{
- return temp-i*0.0001;
- }
- }
- function GetRound1 (temp) {
- var i = Math.Round (math.random () *9+1);
- if (i%2==0) {
- return temp + i*0.0002;
- }else{
- return temp-i*0.0002;
- }
- }
- function Drawgreenline (Startlong,startlat,endlong,endlat) {
- var polyline = new Bmap.polyline ([
- New Bmap.point (Startlong,startlat),//latitude and longitude of starting point
- New Bmap.point (Endlong,endlat)//latitude and longitude of terminating point
- ], {strokecolor: "green",//Set color
- Strokeweight:3,//width
- Strokeopacity:1});//Transparency
- Map.addoverlay (polyline);
- }
- function Drawredline () {
- Startlongr = Endlongr;
- Startlatr = Endlatr;
- Endlongr = getRound1 (ENDLONGR);
- Endlatr = getRound1 (ENDLATR);
- var polyline1 = new Bmap.polyline ([
- New Bmap.point (STARTLONGR,STARTLATR),//latitude and longitude of starting point
- New Bmap.point (ENDLONGR,ENDLATR)//latitude and longitude of terminating point
- ], {strokecolor: "red",//Set color
- Strokeweight:3,//width
- Strokeopacity:1});//Transparency
- Map.addoverlay (POLYLINE1);
- }
- function DrawIcon (Startlong,startlat,endlong,endlat) {
- if (CARMK) {
- Map.removeoverlay (CARMK);
- }
- CARMK = new Bmap.marker (
- New Bmap.point (Endlong,endlat),//latitude and longitude of starting point
- {Icon:myicon});
- Map.addoverlay (CARMK);
- Drawgreenline (Startlong,startlat,endlong,endlat);
- }
- </Script>
Baidu Map API, according to latitude and longitude to achieve vehicle movement trajectory mapping
