百度地图polyline画线不显示问题

阅读原文时间：2021年04月21日阅读：1

最近在公司的一个项目中用到了百度地图，自己也自学了一遍百度地图的API，但是遇到了一个十分纠结的问题，现将最后的解决方法分享一下。
我在html页面中进行数据的模拟，可将线路站点，线路画线标记在地图上，代码如下：

<html>  
<head>  
    <title>百度地图demo</title>  
    <!--css-->  
    <!--javascript-->  
    <script src="../js/jquery-3.4.1.min.js" type="text/javascript"></script>  
</head>  
<body>  
    <div class="demo_main">  
        <fieldset class="demo_title">  
            百度地图demo  
        </fieldset>  
        <fieldset class="demo_content">  
            <div style="min-height: 100%; width: 100%;" id="map">  
            </div>  
            <script type="text/javascript">  
                var markerArr = [  
                {title: '名称：广州火车站', point: '116.17474166666668,23.61974', address: '广东省广州市广州火车站', tel: '12306'},
                {title: '名称：广州塔（赤岗塔）', point: '116.18160166666667,23.597064999999997', address: '广东省广州市广州塔（赤岗塔)', tel: '18500000000'},
                {title: '名称：天河公园', point: '116.18189833333332,23.588086666666662', address: '广东省广州市天河公园', tel: '18500000000'},
                {title: '名称：广州南站', point: '116.18827666666667,23.5827666666667', address: '广东省广州市南站', tel: '18500000000'}
                ];  


                function map_init() {  
                    var map = new BMap.Map("map"); // 创建Map实例  
                    var point = new BMap.Point(116.17474166666668, 23.61974); //地图中心点，广州市  
                    map.centerAndZoom(point, 13); // 初始化地图,设置中心点坐标和地图级别。  
                    map.enableScrollWheelZoom(true); //启用滚轮放大缩小  
                    //向地图中添加缩放控件  
                    var ctrlNav = new window.BMap.NavigationControl({  
                        anchor: BMAP_ANCHOR_TOP_LEFT,  
                        type: BMAP_NAVIGATION_CONTROL_LARGE  
                    });  
                    map.addControl(ctrlNav);  

                    //向地图中添加缩略图控件  
                    var ctrlOve = new window.BMap.OverviewMapControl({  
                        anchor: BMAP_ANCHOR_BOTTOM_RIGHT,  
                        isOpen: 1  
                    });  
                    map.addControl(ctrlOve);  

                    //向地图中添加比例尺控件  
                    var ctrlSca = new window.BMap.ScaleControl({  
                        anchor: BMAP_ANCHOR_BOTTOM_LEFT  
                    });  
                    map.addControl(ctrlSca);  

                    var point = new Array(); //存放标注点经纬信息的数组  
                    var marker = new Array(); //存放标注点对象的数组  
                    var info = new Array(); //存放提示信息窗口对象的数组  

                    var geolocation = new BMap.Geolocation()
                    console.log(geolocation)
                    geolocation.getCurrentPosition((r) => {
                        if (r.point) {
                            let markers = new BMap.Marker(r.point)        // 我的位置标记
                            map.addOverlay(markers)
                            var label = new window.BMap.Label('我的当前位置', { offset: new window.BMap.Size(15, -15) });  
                            markers.setLabel(label);  
                            markers.setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
                        }
                    })


                    setTimeout(drawIcon,500);
                    var carMk;
                    var myBeginIcon = new BMap.Icon("http://e.hiphotos.baidu.com/image/pic/item/7e3e6709c93d70cfaf72bca2f0dcd100bba12b90.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人
                    var myEndIcon = new BMap.Icon("http://b.hiphotos.baidu.com/image/pic/item/b58f8c5494eef01f534c096ae8fe9925bd317dc0.jpg", new BMap.Size(25,37), {imageOffset: new BMap.Size(0, 0)});//人

                    function drawIcon(){
                        for (var i = 0; i < markerArr.length; i++) {  
                            var p0 = markerArr[i].point.split(",")[0]; //  lng
                            var p1 = markerArr[i].point.split(",")[1]; // lat
                            point[i] = new window.BMap.Point(p0, p1); //循环生成新的地图点  
                            marker[i] = new window.BMap.Marker(point[i]); //按照地图点坐标生成标记  
                            map.addOverlay(marker[i]);  

                            marker[i].setAnimation(BMAP_ANIMATION_BOUNCE); //跳动的动画  
                            var label = new window.BMap.Label(markerArr[i].title, { offset: new window.BMap.Size(15, -15) });  
                            marker[i].setLabel(label);  
                            info[i] = new window.BMap.InfoWindow("<p style=’font-size:12px;lineheight:1.8em;’>" + markerArr[i].title + "</br>地址：" + markerArr[i].address + "</br> 电话：" + markerArr[i].tel + "</br></p>"); // 创建信息窗口对象  
                            // drawGreenLine(i)
                            var polyline = new BMap.Polyline([
                            new BMap.Point(116.17474166666668, 23.61974),
                            new BMap.Point(116.18160166666667, 23.597064999999997),
                            new BMap.Point(116.18189833333332, 23.588086666666662),
                            new BMap.Point(116.18827666666667, 23.5827666666667)
                            ], {strokeColor:"green",//设置颜色
                                strokeWeight:2, //宽度
                                strokeOpacity:1});//透明度
                            console.log(polyline, '1111111111111')
                            map.addOverlay(polyline);
                        }
                }                
                }  
                //异步调用百度js  
                function map_load() {  
                    var load = document.createElement("script");  
                    map_init()
                    document.body.appendChild(load);  
                }  
                window.onload = map_load;  
            </script>  
        </fieldset>  
    </div>  
</body>  
</html>
<script type="text/javascript" src="https://api.map.baidu.com/api?v=3.0&ak=F5Tyw5tMXmZHB5CUeGWoPWEz9WgqL0u3"></script>

得到运行结果：

但是将画线的函数放到我所做项目中时，一样的调用函数，一样的模拟数据，只显示了站点，画线怎么也没有显示，经过调试，发现函数是已经调用的，并且函数是有数值的，折腾了一两天的时间，发现是canvas的样式影响到了画线，因此解决办法如下：