百度地图初次使用的一些方法的介绍和静态行驶轨迹,点击当前行驶路径,进行高亮显示

1、核心类 Map

  方法:setViewport  根据提供的地理区域或坐标设置地图视野,调整后的视野会保证包含提供的地理区域或坐标

  事件:addoverlay 当使用Map.addOverlay()方法向地图中添加单个覆盖物时会触发此事件

     removeoverlay    当使用Map.removeOverlay()方法移除单个覆盖物时会触发此事件 

  代码实例:

  var map=new BMap.Map();

  var point=new BMap.Point(116.29579,39.837146);//以指定的经度和纬度创建一个地理点坐标

  map.setViewport(point);// 带验证

2、静态行驶轨迹,点击当前行驶路径,进行高亮显示  代码如下

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>静态行驶轨迹,点击当前行驶路径,进行高亮显示</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=wIt2mDCMGWRIi2pioR8GZnfrhSKQHzLY"></script>
    <script src="lodash.js"></script>
    <script src="GPSTransition.js"></script>
</head>
<body>
<div>
    点击第一条路径进行高亮显示 <button id="firstPath">请点击</button>
    <input id="firstId" type="text" hidden value="LNBSCB3F2FD11327120190327091134" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
<div>
    点击第二条路径进行高亮显示 <button id="secondPath">请点击</button>
    <input id="secondId" type="text" hidden value="LNBSCB3F2FD11327120190327103555" title="隐藏保存rowKey,模拟vue中的v-for渲染事件">
</div>
<div id="mapId" style="height: 500px;">
    <script>
        window.viewPonit=[];// 根据提供的地理区域或坐标设置地图视野
        window.polylineObj=[];
        var map = new BMap.Map("mapId");
        map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放
        map.addControl(new BMap.ScaleControl()); // 添加比例尺控件
        var RowKeys=["LNBSCB3F2FD11327120190327091134","LNBSCB3F2FD11327120190327103555"];
        // 假设下面是第一个接口中请求过来的数据:用rowKey的值来请求过来每一条轨迹的经纬度
        var result={
            data:{
                Record:[{
                    RowKey:"LNBSCB3F2FD11327120190327091134"
                },{
                    RowKey:"LNBSCB3F2FD11327120190327103555"
                }]
            },
            errcode: "",
            errmsg: "",
            state: "1",
        };
        var sumPath=[{RowKey:"LNBSCB3F2FD11327120190327091134",point:[{Longitude: "104.074027",Latitude:"30.707441"},
                {Longitude: "104.073849", Latitude:"30.707667"},
                { Longitude: "104.073439", Latitude: "30.708143"},
                { Longitude: "104.073197", Latitude: "30.708494"},
                {Longitude: "104.073955", Latitude: "30.708502"},
                {Longitude: "104.074909", Latitude: "30.708283"},
                {Longitude: "104.075935", Latitude: "30.708124"},
                { Longitude: "104.076907", Latitude: "30.708074"},
                {Longitude: "104.077134", Latitude: "30.708088"},
                {Longitude: "104.077203", Latitude: "30.70822"},
                {Longitude: "104.077442", Latitude: "30.708328"},
                { Longitude: "104.077563", Latitude: "30.708757"},
                { Longitude: "104.077894", Latitude: "30.709436"},
                { Longitude: "104.078166", Latitude: "30.710533"},
                {Longitude: "104.078179", Latitude: "30.711313"},
                {Longitude: "104.079046", Latitude: "30.711303"},
                {Longitude: "104.080373", Latitude: "30.711341"},
                { Longitude: "104.083328", Latitude: "30.711724"},
                { Longitude: "104.084903", Latitude: "30.710111"},
                { Longitude: "104.085773", Latitude: "30.709084"},
                { Longitude: "104.08678", Latitude: "30.707893"},
                { Longitude: "104.08766", Latitude: "30.707396"},
                { Longitude: "104.088474", Latitude: "30.707899"},
                { Longitude: "104.089106", Latitude: "30.707373"},
                {Longitude: "104.08975", Latitude: "30.706569"},
                {Longitude: "104.08981", Latitude: "30.706481"},
                { Longitude: "104.089812", Latitude: "30.706463"},
                {Longitude: "104.090075", Latitude: "30.706152"},
                { Longitude: "104.090405", Latitude: "30.70575"},
                {Longitude: "104.090774", Latitude: "30.705382"},
                {Longitude: "104.091152", Latitude: "30.705076"},
                {Longitude: "104.091376", Latitude: "30.70503"},
                {Longitude: "104.091513", Latitude: "30.704999"},
                {Longitude: "104.092173", Latitude: "30.704499"},
                {Longitude: "104.092582", Latitude: "30.704179"},
                {Longitude: "104.093084", Latitude: "30.703797"},
                { Longitude: "104.092784", Latitude: "30.703114"},
                { Longitude: "104.09221", Latitude: "30.702311"},
                { Longitude: "104.091589", Latitude: "30.701418"},
                {Longitude: "104.090919", Latitude: "30.70047"},
                {Longitude: "104.090434", Latitude: "30.699731"},
                { Longitude: "104.089988", Latitude: "30.698918"},
                {Longitude: "104.089372", Latitude: "30.698138"},
                { Longitude: "104.089149", Latitude: "30.697841"},
                {Longitude: "104.089079", Latitude: "30.697768"},
                {Longitude: "104.088915", Latitude: "30.697549"},
                {Longitude: "104.088783", Latitude: "30.69735"},
                { Longitude: "104.088663", Latitude: "30.697095"},
                {Longitude: "104.088267", Latitude: "30.696512"},
                {Longitude: "104.087917", Latitude: "30.695944"},
                {Longitude: "104.087736", Latitude: "30.695665"},
                {Longitude: "104.087737", Latitude: "30.695664"},
                { Longitude: "104.087744", Latitude: "30.695633"},
                { Longitude: "104.087717", Latitude: "30.695646"},
                { Longitude: "104.087748", Latitude: "30.69565"},
                {Longitude: "104.087794", Latitude: "30.69562"},
                { Longitude: "104.087789", Latitude: "30.695607"},
                {Longitude: "104.087757", Latitude: "30.695587"},
                { Longitude: "104.087697", Latitude: "30.695522"},
                { Longitude: "104.087692", Latitude: "30.695518"},
                {Longitude: "104.087691", Latitude: "30.695475"},
                { Longitude: "104.087713", Latitude: "30.695044"},
                { Longitude: "104.08747", Latitude: "30.694616"},
                { Longitude: "104.087704", Latitude: "30.694107"},
                {Longitude: "104.089057", Latitude: "30.693239"},
                { Longitude: "104.090454", Latitude: "30.692497"},
                {Longitude: "104.09134", Latitude: "30.692105"},
                { Longitude: "104.092401", Latitude: "30.691539"},
                { Longitude: "104.093162", Latitude: "30.690982"},
                { Longitude: "104.094377", Latitude: "30.690397"},
                { Longitude: "104.095618", Latitude: "30.689868"},
                { Longitude: "104.096944", Latitude: "30.689285"},
                {Longitude: "104.098082", Latitude: "30.688697"},
                {Longitude: "104.098549", Latitude: "30.688377"},
                { Longitude: "104.098841", Latitude: "30.688191"},
                { Longitude: "104.099224", Latitude: "30.687982"},
                {Longitude: "104.099817", Latitude: "30.687664"},
                { Longitude: "104.100589", Latitude: "30.686974"},
                { Longitude: "104.101127", Latitude: "30.686045"},
                { Longitude: "104.101417", Latitude: "30.685347"},
                { Longitude: "104.101487", Latitude: "30.685103"},
                { Longitude: "104.101575", Latitude: "30.684841"},
                { Longitude: "104.101661", Latitude: "30.684491"},
                { Longitude: "104.101797", Latitude: "30.684086"},
                {Longitude: "104.10211", Latitude: "30.683614"},
                { Longitude: "104.102555", Latitude: "30.683017"},
                { Longitude: "104.103033", Latitude: "30.682261"},
                { Longitude: "104.103687", Latitude: "30.681262"},
                { Longitude: "104.104324", Latitude: "30.680185"},
                { Longitude: "104.104847", Latitude: "30.679258"},
                { Longitude: "104.10534", Latitude: "30.678399"},
                {Longitude: "104.105858", Latitude: "30.6774"},
                { Longitude: "104.106281", Latitude: "30.676203"},
                { Longitude: "104.106763", Latitude: "30.674916"},
                { Longitude: "104.107008", Latitude: "30.674346"},
                { Longitude: "104.107371", Latitude: "30.673312"},
                { Longitude: "104.107735", Latitude: "30.672597"},
                { Longitude: "104.108093", Latitude: "30.672052"},
                { Longitude: "104.108169", Latitude: "30.672066"},
                { Longitude: "104.108357", Latitude: "30.671763"},
                { Longitude: "104.108568", Latitude: "30.671393"},
                { Longitude: "104.108794", Latitude: "30.670999"},
                { Longitude: "104.109002", Latitude: "30.670466"},
                { Longitude: "104.109247", Latitude: "30.669648"},
                { Longitude: "104.109328", Latitude: "30.66947"},
                { Longitude: "104.109379", Latitude: "30.66939"},
                { Longitude: "104.109378", Latitude: "30.66935"},
                { Longitude: "104.109422", Latitude: "30.669311"},
                {Longitude: "104.109464", Latitude: "30.669272"},
                { Longitude: "104.109483", Latitude: "30.669249"},
                {Longitude: "104.109581", Latitude: "30.668991"},
                { Longitude: "104.109982", Latitude: "30.668202"},
                { Longitude: "104.110218", Latitude: "30.666918"},
                { Longitude: "104.11042", Latitude: "30.666081"},
                { Longitude: "104.110035", Latitude: "30.665753"},
                { Longitude: "104.109099", Latitude: "30.66555"},
                {Longitude: "104.108754", Latitude: "30.665493"},
                { Longitude: "104.1087", Latitude: "30.665405"},
                {Longitude: "104.108675", Latitude: "30.665402"},
                {Longitude: "104.108667", Latitude: "30.665388"}]},{
            RowKey:"LNBSCB3F2FD11327120190327103555",
            point:[
                { Longitude: "104.108671", Latitude: "30.665446"},
                { Longitude: "104.108674", Latitude: "30.665469"},
                { Longitude: "104.108665", Latitude: "30.665504"},
                { Longitude: "104.108886", Latitude: "30.665541"},
                { Longitude: "104.109118", Latitude: "30.665525"},
                {Longitude: "104.109635", Latitude: "30.665707"},
                { Longitude: "104.110082", Latitude: "30.665854"},
                { Longitude: "104.110456", Latitude: "30.665854"},
                { Longitude: "104.110713", Latitude: "30.665265"},
                { Longitude: "104.11079", Latitude: "30.665048"},
                { Longitude: "104.11084", Latitude: "30.664966"},
                { Longitude: "104.110875", Latitude: "30.664916"},
                { Longitude: "104.110878", Latitude: "30.664905"},
                { Longitude: "104.110942", Latitude: "30.664869"},
                { Longitude: "104.111039", Latitude: "30.664821"},
                { Longitude: "104.111067", Latitude: "30.664806"},
                { Longitude: "104.111104", Latitude: "30.664769"},
                { Longitude: "104.111136", Latitude: "30.664736"},
                { Longitude: "104.110996", Latitude: "30.664811"},
                { Longitude: "104.110988", Latitude: "30.6648"},
                { Longitude: "104.111038", Latitude: "30.664706"},
                { Longitude: "104.111053", Latitude: "30.664683"},
                { Longitude: "104.11132", Latitude: "30.664111"},
                { Longitude: "104.111611", Latitude: "30.663403"},
                { Longitude: "104.111665", Latitude: "30.663251"},
                { Longitude: "104.11173", Latitude: "30.663238"},
                { Longitude: "104.111794", Latitude: "30.663281"},
                { Longitude: "104.111895", Latitude: "30.663286"},
                { Longitude: "104.112526", Latitude: "30.663235"},
                { Longitude: "104.113186", Latitude: "30.663265"},
                { Longitude: "104.114061", Latitude: "30.663335"},
                {  Longitude: "104.11468", Latitude: "30.663531"},
                {  Longitude: "104.115255", Latitude: "30.663612"},
                {Longitude: "104.11565", Latitude: "30.663767"}
            ]
        }];
        // 循环请求出来经纬度
        for(var i= 0;i<result.data.Record.length;i++){
            wheelPath(result.data.Record[i].RowKey,i,result.data.Record.length);
        }
        // 模拟接口请求,请求出来RowKey所对应的经纬度
        function wheelPath(RowKey,index) {
            var color=['#e4613b','#6b9519','#b2a605','#956303','#308705','#bf710d','#d74108','#b5c105','#443ad7','#35cf96','#6a0893','#3605cd',"#546215","#ae7013","#ec9a1f","#d76504","#11d5c3","#11d57a","#11d556","#14d511","#2b49db","#6a7bcf","#32395c","#563499","#7d47e6","#b42dec"]
            var LngAndLat= _.filter(sumPath, { 'RowKey': RowKey });
            console.log("经纬度:"+JSON.stringify(LngAndLat));
            drawLine(LngAndLat[0].point,RowKey,color[index]);
        }
        // 画出所有的轨迹
        function drawLine(pointStr,RowKey,color) {
            // 处理成百度地图上需要的经纬度
            var pointArr = [];
            for (var k = 0; k < pointStr.length; k++) {
                pointArr.push({
                    lng: pointStr[k].Longitude,
                    lat: pointStr[k].Latitude
                });
            }
            // 转成百度地图所使用的坐标点
            var trackPoint = [];
            var first;// 第一条数据的开始点
            var last;// 最后一条数据的结束点
            for (var i = 0, j = pointArr.length; i < j; i++) {
                trackPoint.push(translateBD(pointArr[i].lng,pointArr[i].lat));
                window.viewPonit=window.viewPonit.concat(trackPoint);// concat 既可以连接字符串又可以连接数组
            }
            // 高亮显示一组数据
            var polyline={RowKey:RowKey,point:trackPoint};
            window.polylineObj.push(polyline);
            // 画线
            var polyline = new BMap.Polyline(trackPoint, {
                strokeColor:color,
                strokeWeight: 5,
                setStrokeStyle:"dashed",
                strokeOpacity: 1
            });

            map.addOverlay(polyline);
            map.centerAndZoom(window.viewPonit, 13);
        }
        marker();// 画起始点和终点的图标
        // 转成正常经纬度
        function translateBD(Latitude,Longitude){
            var arr1 = GPS.gcj_encrypt(Number(Longitude), Number(Latitude));
            var arr2 = GPS.bd_encrypt(arr1['lat'], arr1['lon']);
            var point = new BMap.Point(arr2['lon'], arr2['lat']);
            //var point = new BMap.Point(Longitude, Latitude);
            return point;
        }
        // 开始和结束的marker
        function marker(){
            var firstPoint=window.polylineObj[0].point[0];
            var last=window.polylineObj[window.polylineObj.length-1].point.length;
            var lastPoint=window.polylineObj[window.polylineObj.length-1].point[last-1];
            if(firstPoint!==""){
                map.centerAndZoom(firstPoint, 13);
                this.locationIcon("起点",firstPoint);
            }
            if(lastPoint!==""){
                this.locationIcon("终点",lastPoint);
                map.setViewport(window.viewPonit);// 根据提供的地理区域或坐标设置地图视野
            }
        }
        // 创建位置图标
        function locationIcon(n,point){
            // 配置图片
            var size = new BMap.Size(45, 45);
            var offset = new BMap.Size(0, 0);
            var imageSize = new BMap.Size(45, 45);
            if(n=="起点"){
                var iconStart = new BMap.Icon("startMap.png", size, {
                    imageSize: imageSize,
                    infoWindowAnchor:new BMap.Size(0, -3),
                    anchor: new BMap.Size(20, 45)
                });
                var markerStart = new BMap.Marker(point, {
                    icon: iconStart,
                    offset: offset
                }); // 创建标注
                map.addOverlay(markerStart);
            }else {
                var iconEnd = new BMap.Icon("endMap.png", size, {
                    imageSize: imageSize,
                    infoWindowAnchor:new BMap.Size(0, -3),
                    anchor: new BMap.Size(20, 45)
                });
                var markerEnd = new BMap.Marker(point, {
                    icon: iconEnd,
                    offset: offset
                }); // 创建标注
                map.addOverlay(markerEnd);
            }
        }
        // 点击第一条路径进行高亮显示
        document.getElementById("firstPath").addEventListener("click",function () {
            var RowKey=document.getElementById("firstId").value;
            var LightLine=_.filter(window.polylineObj,{RowKey:RowKey});
            if(LightLine.length>0){
                highLightLine(LightLine[0].point);
            }else {
                alert("该条记录没有行车轨迹!");
                highLightLine([]);
            }

        });
        // 点击第二条路径进行高亮显示
        document.getElementById("secondPath").addEventListener("click",function () {
            var RowKey=document.getElementById("secondId").value;
            var LightLine=_.filter(window.polylineObj,{RowKey:RowKey});
            if(LightLine.length>0){
                highLightLine(LightLine[0].point);
            }else {
                alert("该条记录没有行车轨迹!");
                highLightLine([]);
            }
        });
        // 高亮色
        function highLightLine(highLightPoint,pointIndex) {
            // 高亮色的注释掉
            var polyline = new BMap.Polyline(highLightPoint, {
                strokeColor: "#a8fe22",
                strokeWeight: 5,
                setStrokeStyle: "dashed",
                strokeOpacity: 1
            });
            //window.lastHighLine=highLightPoint;
            // 移除上一次高亮画出的线
            if (window.lastHighLine !== "") {
                map.removeOverlay(window.lastHighLine);
            }
            map.addOverlay(polyline);   //增加折线
            polyline.setStrokeWeight(8);// 高亮要配和 addOverlay一起使用
            window.lastHighLine = polyline;
        }
    </script>
</body>
</html>

 

 文件中需要的2个js文件和2个图片

lodash文件:https://raw.githubusercontent.com/lodash/lodash/4.17.5/dist/lodash.js

GPS:https://www.cnblogs.com/ilimengyang/p/9570389.html

开始图标和结束图标:

 

posted @ 2018-08-29 19:01  叶韵  Views(1222)  Comments(0Edit  收藏  举报