百度地图Polyline按照自定义参数显示数据

最新推荐文章于 2024-07-11 16:50:01 发布

用jio写的代码

最新推荐文章于 2024-07-11 16:50:01 发布

阅读量2.5k

点赞数 4

文章标签： javascript 数据可视化百度

本文链接：https://blog.csdn.net/qq_35866780/article/details/105023152

版权

项目需求按照多经纬度在百度地图上显示线路。点击线路点显示数据参数；数据方给我wgs84 经纬度他们给我的文档是经纬度要除以60万，别问为什么我也不知道。再进行坐标转换，（这里百度地图也是个坑，坐标转换有次数限制，不知道要不要花钱，我自己找了个类进行转换 gcoord）当线路画完后甲方需要在画的线路上移动或者点击然后出现数据方的信息。翻了文档Polyline 当中有个监听点击，然鹅发现这个点击貌似不给放自定义参数。看了很多人写的解决方法，按照在地图中点击时的坐标然后在去数据中筛选去找，来回实验之后发现百度坐标系中点击的返回的坐标系中和实时的数据不匹配不上（反正我这是匹配不上），更别说我这个坐标转换来转换去的坐标。后来发现在 new Polyline 的时候百度地图会自动给一个类似于ID 的字段 ba

这个是点击或在线路上移动时回传回来的ba

有了这个东西问题就很好解决了。当生成每一段线路的时候将这个ID 字段赋值给原数数据，在点击时通过这个ID字段去原数数据中去找。就能找到相匹配的数据了

下面是源代码：

<!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" /> 
<title>运输轨迹图</title>  
<style type="text/css">
    body, html,#allmap {width:100%;height:100%;overflow:hidden;margin:0;font-family:"微软雅黑";}
    </style>


<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak="></script>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/gcoord.js"></script>
</head>  
<body>  
<div  style="width:100%;height:100%;" id="container"></div>
  
<script type="text/javascript">  
    window.onload = function(){
        var map = new BMap.Map("container"); 
       
        map.enableScrollWheelZoom(true); //滚轮缩放
        
        var driving = new BMap.DrivingRoute(map, {renderOptions:{map:map, autoViewport:true}}); 
        var pointArr=[
        {"agl":"292","gtm":"20170503/010225","hgt":"33","lat":"18029529","lon":"69253959","mlg":"329070","spd":"770"},
        {"agl":"292","gtm":"20170503/010255","hgt":"42","lat":"18032209","lon":"69246540","mlg":"329073","spd":"790"},
        {"agl":"301","gtm":"20170503/010325","hgt":"27","lat":"18035340","lon":"69239029","mlg":"329076","spd":"750"},
        {"agl":"302","gtm":"20170503/010355","hgt":"38","lat":"18039109","lon":"69232290","mlg":"329079","spd":"760"},
        {"agl":"304","gtm":"20170503/010425","hgt":"21","lat":"18043119","lon":"69225540","mlg":"329082","spd":"770"},
        {"agl":"312","gtm":"20170503/010455","hgt":"29","lat":"18047439","lon":"69219249","mlg":"329085","spd":"770"},
        {"agl":"322","gtm":"20170503/010525","hgt":"14","lat":"18052659","lon":"69213690","mlg":"329088","spd":"800"},
        {"agl":"331","gtm":"20170503/010555","hgt":"20","lat":"18058789","lon":"69209019","mlg":"329091","spd":"840"},
        {"agl":"331","gtm":"20170503/010625","hgt":"18","lat":"18065769","lon":"69204690","mlg":"329094","spd":"920"},
        {"agl":"339","gtm":"20170503/010655","hgt":"18","lat":"18072780","lon":"69200809","mlg":"329097","spd":"910"},
        {"agl":"346","gtm":"20170503/010725","hgt":"24","lat":"18080640","lon":"69198249","mlg":"329100","spd":"890"},
        {"agl":"346","gtm":"20170503/010755","hgt":"24","lat":"18088659","lon":"69195990","mlg":"329103","spd":"930"},
        {"agl":"336","gtm":"20170503/010825","hgt":"20","lat":"18096690","lon":"69193009","mlg":"329106","spd":"930"},
        {"agl":"323","gtm":"20170503/010855","hgt":"17","lat":"18103689","lon":"69188359","mlg":"329109","spd":"930"},
        {"agl":"319","gtm":"20170503/010925","hgt":"18","lat":"18109650","lon":"69182739","mlg":"329112","spd":"800"},
        {"agl":"318","gtm":"20170503/010955","hgt":"31","lat":"18115149","lon":"69177330","mlg":"329115","spd":"840"},
        {"agl":"307","gtm":"20170503/011025","hgt":"42","lat":"18119929","lon":"69171240","mlg":"329118","spd":"780"},
        {"agl":"300","gtm":"20170503/011055","hgt":"32","lat":"18123750","lon":"69164179","mlg":"329121","spd":"820"},
        {"agl":"300","gtm":"20170503/011125","hgt":"28","lat":"18127359","lon":"69157159","mlg":"329124","spd":"790"},
        {"agl":"292","gtm":"20170503/011155","hgt":"26","lat":"18130500","lon":"69150049","mlg":"329127","spd":"770"},
        {"agl":"288","gtm":"20170503/011225","hgt":"32","lat":"18132879","lon":"69142320","mlg":"329130","spd":"790"},
        {"agl":"288","gtm":"20170503/011255","hgt":"22","lat":"18135199","lon":"69134280","mlg":"329133","spd":"830"},
        {"agl":"283","gtm":"20170503/011325","hgt":"20","lat":"18137329","lon":"69126390","mlg":"329136","spd":"770"},
        {"agl":"274","gtm":"20170503/011355","hgt":"22","lat":"18138450","lon":"69118339","mlg":"329139","spd":"800"},
        {"agl":"266","gtm":"20170503/011425","hgt":"25","lat":"18138429","lon":"69110070","mlg":"329142","spd":"790"},
        {"agl":"270","gtm":"20170503/011455","hgt":"20","lat":"18138099","lon":"69101790","mlg":"329145","spd":"780"},
        {"agl":"282","gtm":"20170503/011525","hgt":"24","lat":"18138919","lon":"69093519","mlg":"329148","spd":"800"},
        {"agl":"293","gtm":"20170503/011555","hgt":"16","lat":"18141079","lon":"69085590","mlg":"329151","spd":"730"},
        {"agl":"297","gtm":"20170503/011625","hgt":"21","lat":"18144259","lon":"69078319","mlg":"329154","spd":"800"},
        {"agl":"317","gtm":"20170503/011655","hgt":"22","lat":"18148099","lon":"69071749","mlg":"329157","spd":"760"},
        {"agl":"307","gtm":"20170503/011725","hgt":"28","lat":"18153189","lon":"69066609","mlg":"329160","spd":"710"},
        {"agl":"277","gtm":"20170503/011755","hgt":"21","lat":"18155809","lon":"69059349","mlg":"329163","spd":"820"},
        {"agl":"272","gtm":"20170503/011825","hgt":"39","lat":"18156139","lon":"69051009","mlg":"329166","spd":"770"},
        {"agl":"271","gtm":"20170503/011855","hgt":"63","lat":"18156369","lon":"69043749","mlg":"329169","spd":"690"},
        {"agl":"272","gtm":"20170503/011925","hgt":"44","lat":"18156619","lon":"69036000","mlg":"329172","spd":"720"},
        {"agl":"242","gtm":"20170503/011955","hgt":"33","lat":"18155169","lon":"69028770","mlg":"329175","spd":"690"},
        {"agl":"246","gtm":"20170503/012025","hgt":"27","lat":"18151680","lon":"69022419","mlg":"329178","spd":"690"},
        {"agl":"272","gtm":"20170503/012055","hgt":"21","lat":"18150660","lon":"69015529","mlg":"329181","spd":"590"},
        {"agl":"258","gtm":"20170503/012125","hgt":"24","lat":"18150960","lon":"69009030","mlg":"329184","spd":"720"},
        {"agl":"287","gtm":"20170503/012155","hgt":"26","lat":"18151429","lon":"69001980","mlg":"329187","spd":"680"},
        {"agl":"214","gtm":"20170503/012225","hgt":"20","lat":"18148429","lon":"68995839","mlg":"329190","spd":"800"},
        {"agl":"227","gtm":"20170503/012255","hgt":"27","lat":"18142920","lon":"68991009","mlg":"329193","spd":"760"},
        {"agl":"234","gtm":"20170503/012325","hgt":"27","lat":"18139029","lon":"68984599","mlg":"329196","spd":"710"},
        {"agl":"224","gtm":"20170503/012355","hgt":"48","lat":"18135000","lon":"68980020","mlg":"329199","spd":"550"},
        {"agl":"246","gtm":"20170503/012425","hgt":"82","lat":"18132210","lon":"68974650","mlg":"329202","spd":"630"},
        {"agl":"235","gtm":"20170503/012455","hgt":"106","lat":"18129729","lon":"68968860","mlg":"329205","spd":"640"},
        {"agl":"230","gtm":"20170503/012525","hgt":"66","lat":"18128940","lon":"68967679","mlg":"329208","spd":"0"},
        {"agl":"230","gtm":"20170503/012555","hgt":"64","lat":"18128940","lon":"68967679","mlg":"329211","spd":"0"},
        {"agl":"230","gtm":"20170503/012625","hgt":"67","lat":"18128940","lon":"68967679","mlg":"329214","spd":"0"},
        {"agl":"212","gtm":"20170503/012655","hgt":"75","lat":"18116509","lon":"68956039","mlg":"329217","spd":"700"},
        {"agl":"212","gtm":"20170503/012725","hgt":"75","lat":"18116509","lon":"68956039","mlg":"329220","spd":"700"},
        {"agl":"204","gtm":"20170503/012755","hgt":"69","lat":"18113289","lon":"68954059","mlg":"329223","spd":"0"},
        {"agl":"204","gtm":"20170503/012825","hgt":"61","lat":"18113289","lon":"68954059","mlg":"329226","spd":"0"},
        {"agl":"201","gtm":"20170503/012855","hgt":"49","lat":"18108249","lon":"68951940","mlg":"329229","spd":"750"},
        {"agl":"212","gtm":"20170503/012925","hgt":"39","lat":"18104049","lon":"68949489","mlg":"329232","spd":"930"},
        {"agl":"190","gtm":"20170503/012955","hgt":"29","lat":"18096690","lon":"68945880","mlg":"329235","spd":"870"},
        {"agl":"186","gtm":"20170503/013025","hgt":"29","lat":"18089269","lon":"68944549","mlg":"329238","spd":"850"},
        {"agl":"175","gtm":"20170503/013055","hgt":"38","lat":"18082050","lon":"68944800","mlg":"329241","spd":"760"},
        {"agl":"200","gtm":"20170503/013125","hgt":"31","lat":"18076680","lon":"68945079","mlg":"329244","spd":"200"},
        {"agl":"0","gtm":"20170503/013155","hgt":"29","lat":"18076299","lon":"68945100","mlg":"329247","spd":"0"},
        {"agl":"0","gtm":"20170503/013225","hgt":"32","lat":"18076290","lon":"68945100","mlg":"329250","spd":"0"},
        {"agl":"0","gtm":"20170503/013255","hgt":"30","lat":"18076269","lon":"68945109","mlg":"329253","spd":"0"},
        {"agl":"0","gtm":"20170503/013325","hgt":"25","lat":"18076269","lon":"68945089","mlg":"329256","spd":"0"},
        {"agl":"0","gtm":"20170503/013355","hgt":"23","lat":"18076279","lon":"68945089","mlg":"329259","spd":"0"},
        {"agl":"0","gtm":"20170503/013425","hgt":"16","lat":"18076290","lon":"68945079","mlg":"329262","spd":"0"},
        {"agl":"0","gtm":"20170503/013455","hgt":"23","lat":"18076290","lon":"68945079","mlg":"329265","spd":"0"},
        {"agl":"0","gtm":"20170503/013525","hgt":"14","lat":"18076279","lon":"68945089","mlg":"329268","spd":"0"},
        {"agl":"0","gtm":"20170503/013555","hgt":"22","lat":"18076269","lon":"68945089","mlg":"329271","spd":"0"},
        {"agl":"0","gtm":"20170503/013625","hgt":"22","lat":"18076279","lon":"68945089","mlg":"329274","spd":"0"},
        {"agl":"0","gtm":"20170503/013655","hgt":"27","lat":"18076290","lon":"68945079","mlg":"329277","spd":"0"},
        {"agl":"0","gtm":"20170503/013725","hgt":"24","lat":"18076299","lon":"68945100","mlg":"329280","spd":"0"},
        {"agl":"0","gtm":"20170503/013755","hgt":"27","lat":"18076299","lon":"68945089","mlg":"329283","spd":"0"},
        {"agl":"0","gtm":"20170503/013825","hgt":"29","lat":"18076279","lon":"68945079","mlg":"329286","spd":"0"},
        {"agl":"0","gtm":"20170503/013855","hgt":"28","lat":"18076279","lon":"68945119","mlg":"329289","spd":"0"},
        {"agl":"0","gtm":"20170503/013925","hgt":"31","lat":"18076279","lon":"68945119","mlg":"329292","spd":"0"},
        {"agl":"0","gtm":"20170503/013955","hgt":"29","lat":"18076279","lon":"68945100","mlg":"329295","spd":"0"},
        {"agl":"0","gtm":"20170503/014025","hgt":"28","lat":"18076279","lon":"68945089","mlg":"329298","spd":"0"},
        {"agl":"0","gtm":"20170503/014055","hgt":"32","lat":"18076279","lon":"68945079","mlg":"329301","spd":"0"},
        {"agl":"0","gtm":"20170503/014125","hgt":"30","lat":"18076269","lon":"68945089","mlg":"329304","spd":"20"},
        {"agl":"167","gtm":"20170503/014155","hgt":"35","lat":"18075930","lon":"68945169","mlg":"329307","spd":"90"},
        {"agl":"176","gtm":"20170503/014225","hgt":"25","lat":"18074010","lon":"68945640","mlg":"329310","spd":"390"},
        {"agl":"186","gtm":"20170503/014255","hgt":"26","lat":"18068329","lon":"68945490","mlg":"329313","spd":"750"},
        {"agl":"190","gtm":"20170503/014325","hgt":"30","lat":"18061369","lon":"68944110","mlg":"329316","spd":"800"},
        {"agl":"180","gtm":"20170503/014355","hgt":"24","lat":"18054069","lon":"68943129","mlg":"329319","spd":"840"},
        {"agl":"170","gtm":"20170503/014425","hgt":"31","lat":"18046719","lon":"68943930","mlg":"329322","spd":"770"},
        {"agl":"182","gtm":"20170503/014455","hgt":"40","lat":"18039630","lon":"68944599","mlg":"329325","spd":"740"},
        {"agl":"183","gtm":"20170503/014525","hgt":"68","lat":"18032430","lon":"68944149","mlg":"329328","spd":"770"},
        {"agl":"222","gtm":"20170503/014555","hgt":"38","lat":"18025539","lon":"68942329","mlg":"329331","spd":"750"},
        {"agl":"275","gtm":"20170503/014625","hgt":"31","lat":"18024489","lon":"68935590","mlg":"329334","spd":"800"},
        {"agl":"262","gtm":"20170503/014655","hgt":"33","lat":"18025230","lon":"68926509","mlg":"329337","spd":"850"},
        {"agl":"280","gtm":"20170503/014725","hgt":"31","lat":"18024459","lon":"68917599","mlg":"329340","spd":"790"},
        {"agl":"250","gtm":"20170503/014755","hgt":"20","lat":"18023929","lon":"68909040","mlg":"329343","spd":"860"},
        {"agl":"238","gtm":"20170503/014825","hgt":"36","lat":"18021150","lon":"68900730","mlg":"329346","spd":"850"},
        {"agl":"226","gtm":"20170503/014855","hgt":"31","lat":"18016099","lon":"68894289","mlg":"329349","spd":"830"},
        {"agl":"250","gtm":"20170503/014925","hgt":"59","lat":"18012339","lon":"68886949","mlg":"329352","spd":"790"},
        {"agl":"229","gtm":"20170503/014955","hgt":"53","lat":"18007779","lon":"68879619","mlg":"329355","spd":"760"},
        {"agl":"272","gtm":"20170503/015025","hgt":"65","lat":"17988109","lon":"68837659","mlg":"329358","spd":"0"},
        {"agl":"212","gtm":"20170503/015055","hgt":"59","lat":"18002550","lon":"68873760","mlg":"329361","spd":"830"},
        {"agl":"255","gtm":"20170503/015125","hgt":"61","lat":"17998269","lon":"68866530","mlg":"329364","spd":"880"},
        {"agl":"230","gtm":"20170503/015155","hgt":"59","lat":"17995489","lon":"68858409","mlg":"329367","spd":"810"},
        {"agl":"251","gtm":"20170503/015225","hgt":"56","lat":"17991639","lon":"68851029","mlg":"329370","spd":"800"},
        {"agl":"255","gtm":"20170503/015255","hgt":"59","lat":"17988570","lon":"68843370","mlg":"329373","spd":"790"},
        {"agl":"272","gtm":"20170503/015325","hgt":"66","lat":"17988109","lon":"68837659","mlg":"329376","spd":"0"},
        {"agl":"272","gtm":"20170503/015355","hgt":"65","lat":"17988109","lon":"68837659","mlg":"329379","spd":"0"},
        {"agl":"257","gtm":"20170503/015425","hgt":"61","lat":"17987289","lon":"68827429","mlg":"329382","spd":"910"},
        {"agl":"272","gtm":"20170503/015455","hgt":"54","lat":"17986800","lon":"68818069","mlg":"329385","spd":"870"},
        {"agl":"236","gtm":"20170503/015525","hgt":"61","lat":"17983989","lon":"68810179","mlg":"329388","spd":"820"},
        {"agl":"268","gtm":"20170503/015555","hgt":"45","lat":"17982409","lon":"68801580","mlg":"329391","spd":"880"},
        {"agl":"238","gtm":"20170503/015625","hgt":"33","lat":"17980779","lon":"68792970","mlg":"329394","spd":"930"},
        {"agl":"238","gtm":"20170503/015655","hgt":"47","lat":"17976769","lon":"68785419","mlg":"329397","spd":"800"},
        {"agl":"240","gtm":"20170503/015725","hgt":"42","lat":"17972010","lon":"68778720","mlg":"329400","spd":"810"},
        {"agl":"253","gtm":"20170503/015755","hgt":"54","lat":"17969089","lon":"68771029","mlg":"329403","spd":"760"},
        {"agl":"256","gtm":"20170503/015825","hgt":"51","lat":"17967639","lon":"68762719","mlg":"329406","spd":"850"},
        {"agl":"233","gtm":"20170503/015855","hgt":"35","lat":"17964060","lon":"68755029","mlg":"329409","spd":"810"},
        {"agl":"259","gtm":"20170503/015925","hgt":"43","lat":"17960940","lon":"68747439","mlg":"329412","spd":"840"},
        {"agl":"253","gtm":"20170503/015955","hgt":"34","lat":"17959339","lon":"68738679","mlg":"329415","spd":"800"}
        ];


        
        //对坐标进行转换 WGS84 转百度坐标
        for(var i in pointArr){

            var result = gcoord.transform(
              [(pointArr[i].lon/600000), (pointArr[i].lat/600000)],    // 经纬度坐标
              gcoord.WGS84,               // 当前坐标系
              gcoord.BD09                 // 目标坐标系
            );
            pointArr[i].lon=result[0];
            pointArr[i].lat=result[1];
        }


        
        var opts = {
            width : 250,     // 信息窗口宽度
            height: 180,     // 信息窗口高度
            title : "信息窗口" , // 信息窗口标题
            enableMessage:true//设置允许信息窗发送短息
        };
        var trackPoint = [];
        //循环遍历数据 此时的经纬度已经是 百度坐标
        for(var i = 0; i<pointArr.length-1; i++){
            if(i==0) {
                map.centerAndZoom(new BMap.Point(pointArr[i].lon, pointArr[i].lat), 10); //设置中心点
            }

            trackPoint.push(new BMap.Point(pointArr[i].lon,pointArr[i].lat));
            trackPoint.push(new BMap.Point(pointArr[i+1].lon,pointArr[i+1].lat));

            if((pointArr[i].spd/10)<30){
                lineColor="yellow";
            }else if((pointArr[i].spd/10)<60){
                lineColor="green";
            }else if((pointArr[i].spd/10)<90){
                lineColor="black";
            }else {
                lineColor="red";
            }

            PolylineOptions={
                strokeColor:lineColor, 
                strokeWeight:10, 
                strokeOpacity:0.8,

            }
            var polyline = new BMap.Polyline(trackPoint, PolylineOptions);  //生成线路
            console.log(polyline)
            pointArr[i].ba=polyline.ba; //将ba 赋值给原始数据
            polyline.addEventListener("mouseover",attribute); //监听对象

            trackPoint=[];
            map.addOverlay(polyline);

        }

        function deletePoint(){
            $(".BMap_Marker").remove();
        }


        function attribute(e){
            console.log(e)
           deletePoint()
           for(var i = 0; i<pointArr.length-1; i++){
                if( pointArr[i].ba==this.ba){   //ba 比对 
                    var content = "agl="+pointArr[i].agl+'<br>gtm='+pointArr[i].gtm +'<br>hgt='+pointArr[i].hgt+'<br>mlg='+pointArr[i].mlg+"<br>spd="+pointArr[i].spd+"<br>lng="+pointArr[i].lon+"<br>lat="+pointArr[i].lat;
                    var marker = new BMap.Marker(new BMap.Point(e.point.lng,e.point.lat));
                    var infoWindow = new BMap.InfoWindow(content,opts);  // 创建信息窗口对象 
                    var point = new BMap.Point(e.point.lng, e.point.lat);
                    map.openInfoWindow(infoWindow,point); //开启信息窗口
                    map.addOverlay(marker); 
                }
           }
            
        }
    }
</script>  

</body>  
</html>  
</body>
</html>

效果图

用jio写的代码

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
2
评论
百度地图Polyline按照自定义参数显示数据

项目需求按照多经纬度在百度地图上显示线路。点击线路点显示数据参数；数据方给我wgs84 经纬度他们给我的文档是经纬度要除以60万，别问为什么我也不知道。再进行坐标转换，（这里百度地图也是个坑，坐标转换有次数限制，不知道要不要花钱，我自己找了个类进行转换 gcoord）当线路画完后甲方需要在画的线路上移动或者点击然后出现数据方的信息。翻了文档Polyline 当中有个监听点击，然鹅 ...
复制链接

扫一扫