Web项目中完成百度地图GPS定位

前一个星期公司要求完成车载系统的实时定位功能，并在web页面显示，其实只是从数据库获取GPS坐标，然后在百度地图上画出来而已，在此记录以下。

准备工作：

准备Map工具类

var Util = window.Util || {};

/**
 * 数据库的格式 12121.212   ddmmm.mm
 * 处理经纬度信息121.21212 dd.mm.mmm  转化为 dd.dddddd
 * 如果是 -300 非法值,则直接返回原值.
 */
Util.formatSBYCoords = function(lnglat) {if (lnglat === -300) {return lnglat;}var l = lnglat  ;
    var lq = parseInt(l/100) ;
    var lqq = (l-lq*100)/60 ;
    var lqqq = lq +lqq ;
    return lqqq ;
}/**
 * 真实的GPS坐标转换成百度的坐标.
 * @param lng GPS 经度
 * @param lat GPS 纬度
 * @param callback 转换成功后执行的回调函数,如果成功时返回的对象里面 x  代表经度  y 代表纬度.
 */
Util.transferGPS2BD = function(lng, lat, callback) {var callbackName = 'cbk_' + Math.round(Math.random() * 10000);
    var arr = lng + ',' + lat;
    var PositionUrl = "http://api.map.baidu.com/geoconv/v1/?coords="+arr+"&from=1&to=5&ak=gxB9Y6SdvED78vddAYI3psLH&callback=BMap." + callbackName;
    var script = document.createElement('script');
    script.src = PositionUrl;
    document.getElementsByTagName("head")[0].appendChild(script);
    BMap[callbackName] = function(xyResult) {delete BMap[callbackName];    //调用完需要删除改函数
        //var point = new BMap.Point(xyResult.x, xyResult.y);

        //console.log('callback', xyResult);
        callback && callback(xyResult);
    }
}/**
 * 根据GPS坐标转换成实际的地址。
 * @param lng GPS 经度
 * @param lat GPS 纬度
 * @param callback 回调函数
 */
Util.getAddress = function(lng, lat, callback) {var callbackName = 'cbk_' + Math.round(Math.random() * 10000);
    var arr = lat + ',' + lng;
    var PositionUrl = "http://api.map.baidu.com/geocoder/v2/?ak=gxB9Y6SdvED78vddAYI3psLH&callback=BMap." + callbackName + "&location=" + arr + "&coordtype=wgs84ll&output=json&pois=0";
    var script = document.createElement('script');
    script.src = PositionUrl;
    document.getElementsByTagName("head")[0].appendChild(script);
    BMap[callbackName] = function(xyResult) {delete BMap[callbackName];    //调用完需要删除改函数
        //var point = new BMap.Point(xyResult.x, xyResult.y);

        //console.log('callback', xyResult);
        callback && callback(xyResult);
    }
}

执行：

1.初始化地图

CarRealMap.prototype.initMap = function () {var map = new BMap.Map("allmap");
    map.centerAndZoom(new BMap.Point(120.21339, 30.247387), 15);
    map.addControl(new BMap.MapTypeControl());
    map.addControl(new BMap.NavigationControl());
    map.addControl(new BMap.ScaleControl());
    map.addControl(new BMap.OverviewMapControl());
    this.map = map;
}

2.获取用户查看车辆的信息，判断该车是否在工作（出车），未出车显示Lab提示，出车则画出车辆并显示数据的Lab

CarRealMap.prototype.getData = function () {var self = this;
    UtilHelper.ajax(UtilHelper.getMapData(), 'GET', {"refId":$('#refId').val()}, function(result){if(result.runStatus == undefined || result.runStatus == 1){var point = new BMap.Point(120.21339, 30.247387);
            self.map.centerAndZoom(point, 12);
            var opts = {position : point,    // 指定文本标注所在的地理位置
                offset   : new BMap.Size(0, 0)    //设置文本偏移量
            }var carName = "";
            if(result.name != undefined){carName = "(" + result.name + ")";
            }var label = new BMap.Label("当前车辆" + carName + "未使用", opts);
            label.setStyle({color : "red",
                fontSize : "20px",
                height : "20px",
                lineHeight : "20px",
                fontFamily:"微软雅黑"
            });
            self.map.addOverlay(label);

        }else{Util.transferGPS2BD(Util.formatSBYCoords(result.longitude), Util.formatSBYCoords(result.latitude), function(data){if(data.status === 0){var point = new BMap.Point(data.result[0].x, data.result[0].y);
                    self.drawCar(point, result);
                    self.drawTraveLine(point, result);
                }});
        }});
}

2.1 画出车辆方法：

CarRealMap.prototype.drawCar = function (point, realdata) {var self = this;

    var myIcon = new BMap.Icon("http://7xji3q.com1.z0.glb.clouddn.com/car.jpg",
        new BMap.Size(54, 23), {anchor: new BMap.Size(7, 25)});

    if(!self.carMarker){var marker = new BMap.Marker(point, {icon: myIcon});

        marker.setLabel(self.drawMakerLabel(realdata));
        self.carMarker = marker;
        self.map.addOverlay(marker);
    }else{self.carMarker.setLabel(self.drawMakerLabel(realdata));
        self.carMarker.setPosition(point);
    }self.setCarIcon();
    self.map.panTo(point);

}

2.2 画出车辆轨迹方法：

CarRealMap.prototype.drawTraveLine = function (point, realdata) {if(!this.polyline){var polyline = new BMap.Polyline([point], {strokeColor:"#005890", strokeWeight:6, strokeOpacity:0.9});
        this.polyline = polyline;
        this.map.addOverlay(this.polyline);
    }this.paths.push(point);
    this.polyline.setPath(this.paths);
}

2.3 画出数据lab方法：

CarRealMap.prototype.drawMakerLabel = function (realdata) {var t1 = '--';
    var t2 = '--';
    var t3 = '--';
    var bg_color = '#FFF';
    if (realdata.t1 != -300) {t1 = realdata.t1;}if (realdata.t2 != -300) {t2 = realdata.t2;}if (realdata.t3 != -300) {t3 = realdata.t3;}if (realdata.isAlarm === 0) { bg_color = '#FF0000'}var label = new BMap.Label("车牌: " + realdata.name + "  T1: " + t1 + " ℃  T2: " + t2 + " ℃ <br/> T3: " + t3 + " ℃ ",
        {offset:new BMap.Size(45,-25)});
    label.setStyle({'border-color': '#333', 'font-size': '14px', 'background-color': bg_color,'max-width':'none'});
    return label;
}

2.4 画出车辆小图标方法

CarRealMap.prototype.setCarIcon = function () {var myIcon = new BMap.Icon("http://7xji3q.com1.z0.glb.clouddn.com/car.jpg",
        new BMap.Size(54, 23), { anchor: new BMap.Size(7, 25)});
    this.carMarker.setIcon(myIcon);
}

2.5 执行以上方法并setInterval获取数据

CarRealMap.prototype.init = function () {this.initMap();
    this.paths=[];
    window.setInterval(this.getData.bind(this), 10000);
    this.getData();

}

Web项目中完成百度地图GPS定位相关推荐

ios项目中调用百度地图iphone版与百度地图HDipad版的坑
最近在写项目的时候发现了项目中调用百度地图的一个坑,iphone版与ipad版的不同. 一.首先百度地图在ipad上叫百度地图HD,要区分有GPS和没GPS版,也就是说没GPS的没有导航功能,在使用项 ...
前端项目中使用百度地图api，含实例
前言一.使用百度地图接口的步骤二.简单例子 1.第一个地图 2.控件 3.静态/动态添加点圈线面 4.文字标注.信息窗口 5. Web服务API-IP定位服务 6.Web服务API-地点检索服务 ...
AngularJS进阶(十九)在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
AngularJS进阶十九在AngularJS应用中集成百度地图实现定位功能
在AngularJS应用中集成百度地图实现定位功能注:请点击此处进行充电! 前言根据项目需求,需要实现手机定位功能,考虑到百度业务的强大能力,遂决定使用百度地图第三方服务. 添加第三方模块的步骤与 ...
Android 百度地图开发（一）--- 申请API Key和在项目中显示百度地图
2019独角兽企业重金招聘Python工程师标准>>> 最近自己想研究下地图,本来想研究google Map,但是申请API key比较坑爹,于是从百度地图入手,其实他们的用法都差不 ...
react 使用 leaflet 百度地图_【React】react项目中应用百度地图添加起始点绘制路线...
如图:项目中百度地图的应用添加起始点.终点并绘制路线在展示代码的时候首先展示一下后台返回给我的接口 { 其中position_list参数代表的是用户的行驶点, area参数代表的是服务区的坐标点, ...
vue项目中使用百度地图轨迹动画
在上篇博客中,介绍了如何在vue项目中集成百度地图,这篇博客主要是说如何在vue项目中使用轨迹动画在项目开发过程中,比如你需要实时的观察一个人的行走路线,行走过程. 这个时候我们就需要在地图上使用 ...
百度地图的使用方法，如何在Vue项目中使用百度地图
关于百度地图的解释百度地图又称LBS:LocationBussinessServer,是基于定义位置的商业服务,现在常用的地图有百度地图和高德地图居多官网入口 https://lbsyun.bai ...
在Fragment中实现百度地图，定位到当前位置（基于SDKv2.1.0）
使用最新版本的百度地图需要注意的几个地方: 1.libs文件夹下要有android-support-v4.jar.baidumapapi_v2_1_0.jar.locSDK_3.1.jar三个jar包 ...

Web项目中完成百度地图GPS定位

Web项目中完成百度地图GPS定位相关推荐

最新文章

热门文章