BaiDuMap.html 8.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341
  1. 
  2. <!DOCTYPE html>
  3. <html>
  4. <head>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
  7. <style type="text/css">
  8. body, html, #allmap {
  9. width: 100%;
  10. height: 100%;
  11. overflow: hidden;
  12. margin: 0;
  13. font-family: "微软雅黑";
  14. }
  15. </style>
  16. <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EVi8PXiYpKBGvBr7tgGMzcbdwzWWNf2o"></script>
  17. <title>野火GPS地图</title>
  18. </head>
  19. <body>
  20. <div id="allmap"></div>
  21. </body>
  22. </html>
  23. <script type="text/javascript">
  24. try {
  25. // 百度地图API功能
  26. var map = new BMap.Map("allmap", {mapType:BMAP_SATELLITE_MAP}); // 创建Map实例
  27. //添加拖拽和缩放功能
  28. map.enableScrollWheelZoom(true);
  29. map.enableDragging();
  30. //添加控件和比例尺
  31. var top_right_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });// 左下角,添加比例尺
  32. var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); //左下角,添加默认缩放平移控件
  33. map.addControl(top_right_control);
  34. map.addControl(top_right_navigation);
  35. //添加地图类型
  36. var mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_HYBRID_MAP, BMAP_NORMAL_MAP] });
  37. var mapType2 = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_LEFT });
  38. //添加地图类型和缩略图
  39. map.addControl(mapType1); //2D图,卫星图
  40. map.addControl(mapType2); //左上角,默认地图控件
  41. var drawtrail = 0;
  42. var grotation = 0;
  43. //创建点
  44. //map.clearOverlays();
  45. var point = new BMap.Point(117.355, 39.066);
  46. var markerCur = new BMap.Marker(point);
  47. var markerObj = new BMap.Marker(point);
  48. var havepointlast = 0;
  49. var pointlast = new BMap.Point(116,39);
  50. var pointobj = new BMap.Point(116,39);
  51. var bobjset = 0;
  52. var gtracelist = [];
  53. var gtraceraw = [];
  54. var tracenow = 0;
  55. var tracenum = 0;
  56. map.centerAndZoom(point, 18);
  57. var convertor = new BMap.Convertor();
  58. var polylineTrace;
  59. /*
  60. var polylineTrace =new BMap.Polyline(gtracelist, {
  61. enableEditing: false,//是否启用线编辑,默认为false
  62. enableClicking: false,//是否响应点击事件,默认为true
  63. strokeWeight:'4',//折线的宽度,以像素为单位
  64. strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
  65. strokeColor:"red" //折线颜色
  66. });*/
  67. //var marker = new BMap.Marker(point); // 创建标注
  68. //map.addOverlay(marker); // 将标注添加到地图中
  69. //根据IP定位城市
  70. function myFun(result) {
  71. var cityName = result.name;
  72. map.setCenter(cityName);
  73. }
  74. var myCity = new BMap.LocalCity();
  75. myCity.get(myFun);
  76. var icon = new BMap.Icon('car.png',new BMap.Size(15,30));
  77. icon.imageSize = new BMap.Size(15,30);
  78. icon.anchor = new BMap.Size(8,15);
  79. //showalert(testmsg);
  80. //对传入的经纬度进行标注:纬度,经度
  81. // var Latt = 116.404;
  82. // var Lott = 39.915;
  83. // theLocation(Latt, Lott);
  84. // testAlert();
  85. function SetDrawTrail(x)
  86. {
  87. if(x == 1)drawtrail = 1;
  88. else drawtrail = 0;
  89. }
  90. function clear()
  91. {
  92. gtracelist = [];
  93. }
  94. // 用经纬度设置地图中心点
  95. function objLocation(Longitude,Latitude) {
  96. var gpsPoint = new BMap.Point(Longitude, Latitude);
  97. var pointArr = [];
  98. pointArr.push(gpsPoint);
  99. convertor.translate(pointArr, 1, 5, translateCallbackobj)
  100. //gps坐标纠偏
  101. // BMap.Convertor.translate(gpsPoint, 0, translateCallbackobj); //真实经纬度转成百度坐标
  102. }
  103. // 用经纬度设置地图中心点
  104. function theLocation(Longitude,Latitude,rotation) {
  105. grotation = rotation;
  106. var gpsPoint = new BMap.Point(Longitude, Latitude);
  107. //gps坐标纠偏
  108. var pointArr = [];
  109. pointArr.push(gpsPoint);
  110. convertor.translate(pointArr, 1, 5, translateCallback)
  111. //convertor.translate(gpsPoint, 0, translateCallback); //真实经纬度转成百度坐标
  112. // BMap.Convertor.translate(gpsPoint, 0, translateCallback); //真实经纬度转成百度坐标
  113. //map.clearOverlays();
  114. //var new_point = new BMap.Point(Longitude,Latitude );
  115. //var marker = new BMap.Marker(new_point); // 创建标注
  116. //map.addOverlay(marker); // 将标注添加到地图中
  117. //map.panTo(new_point);
  118. //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  119. }
  120. function settrace(numlist,num2list) //仅把qt传来的数组转换成可用的list
  121. {
  122. //alert(numlist);
  123. var num_list,num2_list; //以下为格式转换,分割成可用的数组
  124. num_list = numlist.substring(1,numlist.length-1);
  125. num2_list = num2list.substring(1,num2list.length-1);
  126. num_list = num_list.split(",");
  127. num2_list = num2_list.split(",");
  128. //alert("the num_list is: "+num_list[0]+" "+num_list[1]);
  129. gtraceraw = [];
  130. gtracelist = [];
  131. for(i=0;i<num_list.length;i++)
  132. {
  133. point= new BMap.Point(num_list[i],num2_list[i]);
  134. gtraceraw.push(point);
  135. }
  136. tracenum = num_list.length;
  137. tracenow = 0;
  138. setTimeout("converttrace()", 30);// 调用画轨迹的函数
  139. }
  140. function converttrace()
  141. {
  142. var tracelist = []; //为轨迹做准备,把所有的点扔里面,但不对每个点标注
  143. var index = 0;
  144. for(i=tracenow;i<tracenum;i++)
  145. {
  146. tracelist.push(gtraceraw[i]);
  147. index++;
  148. if(index>=10)break;
  149. }
  150. if(index>0)
  151. {
  152. convertor.translate(tracelist, 1,5,translateCallbacktrace); //真实经纬度转成百度坐标
  153. }
  154. }
  155. translateCallbacktrace = function (data){
  156. if(data.status == 0) {
  157. for (var i = 0; i < data.points.length; i++) {
  158. gtracelist.push(data.points[i]);
  159. }
  160. tracenow = tracenow + data.points.length;
  161. }
  162. map.removeOverlay(polylineTrace);
  163. polylineTrace =new BMap.Polyline(gtracelist, {
  164. enableEditing: false,//是否启用线编辑,默认为false
  165. enableClicking: false,//是否响应点击事件,默认为true
  166. strokeWeight:'4',//折线的宽度,以像素为单位
  167. strokeOpacity: 0.8,//折线的透明度,取值范围0 - 1
  168. strokeColor:"red" //折线颜色
  169. });
  170. map.addOverlay(polylineTrace); //增加折线
  171. setTimeout("converttrace()", 250);// 调用画轨迹的函数
  172. }
  173. // 用经纬度设置地图中心点
  174. function testAlert(msg) {
  175. var str = new String;
  176. str = msg.toString()
  177. // str = "test"
  178. alert(str);
  179. }
  180. function enableZoomDrag()
  181. {
  182. //添加拖拽和缩放功能
  183. map.enableScrollWheelZoom(true);
  184. map.enableDragging();
  185. }
  186. //坐标转换完之后的回调函数
  187. translateCallbackmap = function (point) {
  188. gtracelist.push(point);
  189. // map.setCenter(point);
  190. // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  191. }
  192. //坐标转换完之后的回调函数
  193. translateCallbacktr = function (point) {
  194. gtracelist.push(point);
  195. // map.setCenter(point);
  196. // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  197. }
  198. //坐标转换完之后的回调函数
  199. translateCallbackobj = function (data) {
  200. if(data.status === 0) {
  201. var point = data.points[0];
  202. pointobj = point;
  203. bobjset = 1;
  204. // map.clearOverlays();
  205. map.removeOverlay(markerObj);
  206. markerObj = new BMap.Marker(point);
  207. map.addOverlay(markerObj);
  208. }
  209. // map.setCenter(point);
  210. // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  211. }
  212. //坐标转换完之后的回调函数
  213. translateCallback = function (data) {
  214. if(data.status === 0) {
  215. var point = data.points[0]
  216. map.removeOverlay(markerCur);
  217. markerCur = new BMap.Marker(point);
  218. if(havepointlast == 1)
  219. {
  220. if(drawtrail == 1)
  221. {
  222. var line = new BMap.Polyline([pointlast, point], {strokeColor: "green", strokeWeight: 1, strokeOpacity: 1});
  223. map.addOverlay(line);
  224. line.disableMassClear();
  225. }
  226. }
  227. pointlast = point;
  228. havepointlast = 1;
  229. markerCur.setOffset(-30,-30);
  230. markerCur.setIcon(icon);
  231. markerCur.setShadow(icon)
  232. markerCur.setRotation(grotation);
  233. map.addOverlay(markerCur);
  234. map.setCenter(point);
  235. }
  236. // return;
  237. // map.clearOverlays();
  238. /*
  239. if(bobjset == 1)
  240. {
  241. map.removeOverlay(markerObj);
  242. markerObj = new BMap.Marker(pointobj);
  243. map.addOverlay(markerObj);
  244. }
  245. */
  246. // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
  247. }
  248. } catch (e) {
  249. //alert("地图加载失败,请检查网络!");
  250. }
  251. </script>