1. 程式人生 > >百度地圖js 畫執行軌跡之執行軌跡標註文字(三)

百度地圖js 畫執行軌跡之執行軌跡標註文字(三)

在執行軌跡中需要在起止點加上資訊提示,實現方法如下:

 //加資訊提示的文字方法
    setInfoBox:function (tracksPart,marker) {
        // var point = new BMap.Point(tracksPart.Longitude,tracksPart.Latitude);
        // var marker = new BMap.Marker(point);  // 建立標註
        // var sContent="<div style='width: 1rem;position: relative'>"+
        //         // +"<span style='position:absolute;bottom:-10px;left:40% '><img src='/asserts/img/static/teld_down_arrow.png'></span>"+
        //     +this.formartTZdate(tracksPart.RunTime)+"</div>";
        var sContent="<div style='text-align:center'>" +
            "<span style='position: absolute;bottom: -18px;left: 40%;'>" +
            "<img src='/asserts/img/static/teld_down_arrow.png'></span>"+this.formartTZdate(tracksPart.RunTime)+"</div>";
        // var label = new BMap.Label(sContent);  // 建立資訊視窗物件
        var sizeOffset=this.sizeBdLabel();
        var sizeOffsetH=this.sizeBdLabelH();
        var label = new BMap.Label(sContent,{
            offset:new BMap.Size(sizeOffset,sizeOffsetH)//-20,-50
        });
        label.setStyle({
            border:"1px solid #466d8f",
            borderRadius:"0.133rem",//10px
            backgroundColor:"#fff",
            width:"2.13rem",//80px
            padding:"0.15rem",
            fontSize:"0.32rem"//24px
        });
        marker.setLabel(label);

    },
    //地圖上文字提示資訊的位置適配不同螢幕的距離水平方向
    sizeBdLabel:function () {
        var htmlFont=$("html").data("dpr");
        if(htmlFont =="1"){
            return -20;
        }else if(htmlFont =="2"){
            return -50;
        }else if(htmlFont =="3"){
            return -90;
        }
    },
    //地圖上文字提示資訊的位置適配不同螢幕的距離垂直方向
    sizeBdLabelH:function () {
        var htmlFont=$("html").data("dpr");
        if(htmlFont =="1"){
            return -50;
        }else if(htmlFont =="2"){
            return -90;
        }else if(htmlFont =="3"){
            return -140;
        }
    },