|
|
@@ -0,0 +1,341 @@
|
|
|
+
|
|
|
+
|
|
|
+<!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: "微软雅黑";
|
|
|
+ }
|
|
|
+ </style>
|
|
|
+ <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=EVi8PXiYpKBGvBr7tgGMzcbdwzWWNf2o"></script>
|
|
|
+
|
|
|
+
|
|
|
+ <title>野火GPS地图</title>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+ <div id="allmap"></div>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+</body>
|
|
|
+</html>
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+<script type="text/javascript">
|
|
|
+ try {
|
|
|
+
|
|
|
+
|
|
|
+ // 百度地图API功能
|
|
|
+ var map = new BMap.Map("allmap"); // 创建Map实例
|
|
|
+
|
|
|
+ //添加拖拽和缩放功能
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ map.enableDragging();
|
|
|
+
|
|
|
+ //添加控件和比例尺
|
|
|
+ var top_right_control = new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT });// 左下角，添加比例尺
|
|
|
+ var top_right_navigation = new BMap.NavigationControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT }); //左下角，添加默认缩放平移控件
|
|
|
+
|
|
|
+ map.addControl(top_right_control);
|
|
|
+ map.addControl(top_right_navigation);
|
|
|
+
|
|
|
+
|
|
|
+ //添加地图类型
|
|
|
+ var mapType1 = new BMap.MapTypeControl({ mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP] });
|
|
|
+ var mapType2 = new BMap.MapTypeControl({ anchor: BMAP_ANCHOR_TOP_LEFT });
|
|
|
+
|
|
|
+ //添加地图类型和缩略图
|
|
|
+
|
|
|
+ map.addControl(mapType1); //2D图，卫星图
|
|
|
+ map.addControl(mapType2); //左上角，默认地图控件
|
|
|
+
|
|
|
+ var drawtrail = 0;
|
|
|
+
|
|
|
+ var grotation = 0;
|
|
|
+
|
|
|
+
|
|
|
+ //创建点
|
|
|
+ //map.clearOverlays();
|
|
|
+ var point = new BMap.Point(117.355, 39.066);
|
|
|
+ var markerCur = new BMap.Marker(point);
|
|
|
+ var markerObj = new BMap.Marker(point);
|
|
|
+ var havepointlast = 0;
|
|
|
+ var pointlast = new BMap.Point(116,39);
|
|
|
+ var pointobj = new BMap.Point(116,39);
|
|
|
+ var bobjset = 0;
|
|
|
+ var gtracelist = [];
|
|
|
+ var gtraceraw = [];
|
|
|
+ var tracenow = 0;
|
|
|
+ var tracenum = 0;
|
|
|
+ map.centerAndZoom(point, 18);
|
|
|
+ var convertor = new BMap.Convertor();
|
|
|
+ var polylineTrace;
|
|
|
+/*
|
|
|
+ var polylineTrace =new BMap.Polyline(gtracelist, {
|
|
|
+ enableEditing: false,//是否启用线编辑，默认为false
|
|
|
+ enableClicking: false,//是否响应点击事件，默认为true
|
|
|
+ strokeWeight:'4',//折线的宽度，以像素为单位
|
|
|
+ strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
|
|
|
+ strokeColor:"red" //折线颜色
|
|
|
+ });*/
|
|
|
+ //var marker = new BMap.Marker(point); // 创建标注
|
|
|
+ //map.addOverlay(marker); // 将标注添加到地图中
|
|
|
+
|
|
|
+ //根据IP定位城市
|
|
|
+ function myFun(result) {
|
|
|
+ var cityName = result.name;
|
|
|
+ map.setCenter(cityName);
|
|
|
+ }
|
|
|
+ var myCity = new BMap.LocalCity();
|
|
|
+ myCity.get(myFun);
|
|
|
+
|
|
|
+ var icon = new BMap.Icon('car.png',new BMap.Size(15,30));
|
|
|
+ icon.imageSize = new BMap.Size(15,30);
|
|
|
+ icon.anchor = new BMap.Size(8,15);
|
|
|
+
|
|
|
+
|
|
|
+ //showalert(testmsg);
|
|
|
+
|
|
|
+ //对传入的经纬度进行标注：纬度，经度
|
|
|
+ // var Latt = 116.404;
|
|
|
+ // var Lott = 39.915;
|
|
|
+
|
|
|
+ // theLocation(Latt, Lott);
|
|
|
+ // testAlert();
|
|
|
+
|
|
|
+ function SetDrawTrail(x)
|
|
|
+ {
|
|
|
+
|
|
|
+ if(x == 1)drawtrail = 1;
|
|
|
+ else drawtrail = 0;
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ function clear()
|
|
|
+ {
|
|
|
+ gtracelist = [];
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ // 用经纬度设置地图中心点
|
|
|
+ function objLocation(Longitude,Latitude) {
|
|
|
+
|
|
|
+ var gpsPoint = new BMap.Point(Longitude, Latitude);
|
|
|
+
|
|
|
+ var pointArr = [];
|
|
|
+ pointArr.push(gpsPoint);
|
|
|
+ convertor.translate(pointArr, 1, 5, translateCallbackobj)
|
|
|
+ //gps坐标纠偏
|
|
|
+ // BMap.Convertor.translate(gpsPoint, 0, translateCallbackobj); //真实经纬度转成百度坐标
|
|
|
+
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ // 用经纬度设置地图中心点
|
|
|
+ function theLocation(Longitude,Latitude,rotation) {
|
|
|
+
|
|
|
+ grotation = rotation;
|
|
|
+ var gpsPoint = new BMap.Point(Longitude, Latitude);
|
|
|
+
|
|
|
+ //gps坐标纠偏
|
|
|
+
|
|
|
+
|
|
|
+var pointArr = [];
|
|
|
+pointArr.push(gpsPoint);
|
|
|
+ convertor.translate(pointArr, 1, 5, translateCallback)
|
|
|
+//convertor.translate(gpsPoint, 0, translateCallback); //真实经纬度转成百度坐标
|
|
|
+ // BMap.Convertor.translate(gpsPoint, 0, translateCallback); //真实经纬度转成百度坐标
|
|
|
+
|
|
|
+
|
|
|
+ //map.clearOverlays();
|
|
|
+ //var new_point = new BMap.Point(Longitude,Latitude );
|
|
|
+ //var marker = new BMap.Marker(new_point); // 创建标注
|
|
|
+ //map.addOverlay(marker); // 将标注添加到地图中
|
|
|
+ //map.panTo(new_point);
|
|
|
+ //marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+function settrace(numlist,num2list) //仅把qt传来的数组转换成可用的list
|
|
|
+{
|
|
|
+ //alert(numlist);
|
|
|
+ var num_list,num2_list; //以下为格式转换，分割成可用的数组
|
|
|
+ num_list = numlist.substring(1,numlist.length-1);
|
|
|
+ num2_list = num2list.substring(1,num2list.length-1);
|
|
|
+ num_list = num_list.split(",");
|
|
|
+ num2_list = num2_list.split(",");
|
|
|
+ //alert("the num_list is: "+num_list[0]+" "+num_list[1]);
|
|
|
+
|
|
|
+
|
|
|
+ gtraceraw = [];
|
|
|
+ gtracelist = [];
|
|
|
+ for(i=0;i<num_list.length;i++)
|
|
|
+ {
|
|
|
+ point= new BMap.Point(num_list[i],num2_list[i]);
|
|
|
+ gtraceraw.push(point);
|
|
|
+ }
|
|
|
+ tracenum = num_list.length;
|
|
|
+ tracenow = 0;
|
|
|
+
|
|
|
+ setTimeout("converttrace()", 30);// 调用画轨迹的函数
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+function converttrace()
|
|
|
+{
|
|
|
+ var tracelist = []; //为轨迹做准备，把所有的点扔里面，但不对每个点标注
|
|
|
+ var index = 0;
|
|
|
+ for(i=tracenow;i<tracenum;i++)
|
|
|
+ {
|
|
|
+ tracelist.push(gtraceraw[i]);
|
|
|
+ index++;
|
|
|
+ if(index>=10)break;
|
|
|
+ }
|
|
|
+ if(index>0)
|
|
|
+ {
|
|
|
+
|
|
|
+ convertor.translate(tracelist, 1,5,translateCallbacktrace); //真实经纬度转成百度坐标
|
|
|
+ }
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+translateCallbacktrace = function (data){
|
|
|
+ if(data.status == 0) {
|
|
|
+ for (var i = 0; i < data.points.length; i++) {
|
|
|
+ gtracelist.push(data.points[i]);
|
|
|
+ }
|
|
|
+ tracenow = tracenow + data.points.length;
|
|
|
+ }
|
|
|
+
|
|
|
+ map.removeOverlay(polylineTrace);
|
|
|
+ polylineTrace =new BMap.Polyline(gtracelist, {
|
|
|
+ enableEditing: false,//是否启用线编辑，默认为false
|
|
|
+ enableClicking: false,//是否响应点击事件，默认为true
|
|
|
+ strokeWeight:'4',//折线的宽度，以像素为单位
|
|
|
+ strokeOpacity: 0.8,//折线的透明度，取值范围0 - 1
|
|
|
+ strokeColor:"red" //折线颜色
|
|
|
+ });
|
|
|
+ map.addOverlay(polylineTrace); //增加折线
|
|
|
+ setTimeout("converttrace()", 250);// 调用画轨迹的函数
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+ // 用经纬度设置地图中心点
|
|
|
+ function testAlert(msg) {
|
|
|
+
|
|
|
+ var str = new String;
|
|
|
+ str = msg.toString()
|
|
|
+ // str = "test"
|
|
|
+
|
|
|
+ alert(str);
|
|
|
+ }
|
|
|
+
|
|
|
+ function enableZoomDrag()
|
|
|
+ {
|
|
|
+ //添加拖拽和缩放功能
|
|
|
+ map.enableScrollWheelZoom(true);
|
|
|
+ map.enableDragging();
|
|
|
+ }
|
|
|
+
|
|
|
+ //坐标转换完之后的回调函数
|
|
|
+ translateCallbackmap = function (point) {
|
|
|
+
|
|
|
+ gtracelist.push(point);
|
|
|
+ // map.setCenter(point);
|
|
|
+ // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+ }
|
|
|
+
|
|
|
+ //坐标转换完之后的回调函数
|
|
|
+ translateCallbacktr = function (point) {
|
|
|
+
|
|
|
+ gtracelist.push(point);
|
|
|
+ // map.setCenter(point);
|
|
|
+ // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+ }
|
|
|
+
|
|
|
+ //坐标转换完之后的回调函数
|
|
|
+ translateCallbackobj = function (data) {
|
|
|
+ if(data.status === 0) {
|
|
|
+ var point = data.points[0];
|
|
|
+ pointobj = point;
|
|
|
+ bobjset = 1;
|
|
|
+ // map.clearOverlays();
|
|
|
+ map.removeOverlay(markerObj);
|
|
|
+ markerObj = new BMap.Marker(point);
|
|
|
+
|
|
|
+ map.addOverlay(markerObj);
|
|
|
+ }
|
|
|
+
|
|
|
+ // map.setCenter(point);
|
|
|
+ // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ //坐标转换完之后的回调函数
|
|
|
+ translateCallback = function (data) {
|
|
|
+
|
|
|
+if(data.status === 0) {
|
|
|
+ var point = data.points[0]
|
|
|
+ map.removeOverlay(markerCur);
|
|
|
+ markerCur = new BMap.Marker(point);
|
|
|
+ if(havepointlast == 1)
|
|
|
+ {
|
|
|
+ if(drawtrail == 1)
|
|
|
+ {
|
|
|
+ var line = new BMap.Polyline([pointlast, point], {strokeColor: "green", strokeWeight: 1, strokeOpacity: 1});
|
|
|
+ map.addOverlay(line);
|
|
|
+ line.disableMassClear();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ pointlast = point;
|
|
|
+ havepointlast = 1;
|
|
|
+
|
|
|
+ markerCur.setOffset(-30,-30);
|
|
|
+ markerCur.setIcon(icon);
|
|
|
+ markerCur.setShadow(icon)
|
|
|
+ markerCur.setRotation(grotation);
|
|
|
+ map.addOverlay(markerCur);
|
|
|
+ map.setCenter(point);
|
|
|
+ }
|
|
|
+// return;
|
|
|
+// map.clearOverlays();
|
|
|
+
|
|
|
+/*
|
|
|
+ if(bobjset == 1)
|
|
|
+ {
|
|
|
+ map.removeOverlay(markerObj);
|
|
|
+ markerObj = new BMap.Marker(pointobj);
|
|
|
+
|
|
|
+ map.addOverlay(markerObj);
|
|
|
+ }
|
|
|
+
|
|
|
+*/
|
|
|
+
|
|
|
+ // marker.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画
|
|
|
+ }
|
|
|
+
|
|
|
+ } catch (e) {
|
|
|
+
|
|
|
+ alert("地图加载失败，请检查网络！");
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+
|
|
|
+
|
fujiankuan
