百度地圖創(chuàng)建多個路書時只顯示一個覆蓋物

效果圖

          _showMap () {
            let map = new BMap.Map("container");  // 創(chuàng)建Map實例
            let point = new BMap.Point(116.4185,39.9142);  // 創(chuàng)建中心點坐標
            map.centerAndZoom(point, 19); // 地圖級別
            map.enableScrollWheelZoom(true);  //開啟鼠標滾輪縮放

            function makerTeam(teams) {
              for (let i=0,len=teams.length; i<len ; i++) {
                // 隊伍創(chuàng)建
                let point = new BMap.Point(teams[i].lng, teams[i].lat);
                let team = new BMap.Icon(teams[i].name === '消防隊伍' ? "src/images/fireFightingTeam.png" : "src/images/otherTeam.png", new BMap.Size(17.3*2,14.2*2),{imageSize:new BMap.Size(17.3*2,14.2*2)});
                let marker = new BMap.Marker(point,{icon:team});
                map.addOverlay(marker);
                // 文字
                let label = new BMap.Label(teams[i].name,{offset:new BMap.Size(-10,30)});
                label.setStyle({
                  color: '#fff',
                  fontSize: '12px',
                  padding: '5px',
                  background: 'rgba(0, 0, 0, .5)',
                  border: '2px solid #000',
                  fontFamily:"微軟雅黑",
                  borderRadius: '3px'
                });
                marker.setLabel(label);
              }
            }
            makerTeam(this.teams);

            function vehicleRun (vehicles) {
              for (let i=0,len=vehicles.length; i<len; i++) {
                var lushu;
                let circle;
                // 實例化一個駕車導航用來生成路線
                let drv = new BMap.DrivingRoute(vehicles[i].city, {
                  onSearchComplete: function(res) {
                    if (drv.getStatus() == BMAP_STATUS_SUCCESS) {
                      let plan = res.getPlan(0);
                      let arrPois =[];
                      for(let j=0;j<plan.getNumRoutes();j++){
                        let route = plan.getRoute(j);
                        arrPois= arrPois.concat(route.getPath());
                      }
                      map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'}));
                      map.setViewport(arrPois);

                      lushu = new BMapLib.LuShu(map,arrPois,{
                        defaultContent: "",//"從天安門到百度大廈"
                        autoView: true,//是否開啟自動視野調整，如果開啟那么路書在運動過程中會根據(jù)視野自動調整
                        icon: new BMap.Icon('src/images/selectedVehicle.png', new BMap.Size(37.58*2,13.6*2),{imageSize:new BMap.Size(37.58*2,13.6*2)}),
                        speed: 100,
                        enableRotation: true,//是否設置marker隨著道路的走向進行旋轉
                        landmarkPois: [
                          {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                          {lng:116.315391,lat:39.964429,html:'高速公路收費<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
                          {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
                        ]
                      });
                      circle = new BMapLib.LuShu(map,arrPois,{
                        defaultContent: "",//"從天安門到百度大廈"
                        autoView: true,//是否開啟自動視野調整，如果開啟那么路書在運動過程中會根據(jù)視野自動調整
                        icon: new BMap.Icon('src/images/circle.png', new BMap.Size(56.69*10,31.89*10),{imageSize:new BMap.Size(56.69*10,31.89*10)}),
                        speed: 100,
                        enableRotation: true,//是否設置marker隨著道路的走向進行旋轉
                        landmarkPois: [
                          {lng:116.314782,lat:39.913508,html:'加油站',pauseTime:2},
                          {lng:116.315391,lat:39.964429,html:'高速公路收費<div><img src="http://map.baidu.com/img/logo-map.gif"/></div>',pauseTime:3},
                          {lng:116.381476,lat:39.974073,html:'肯德基早餐<div><img src="http://ishouji.baidu.com/resource/images/map/show_pic04.gif"/></div>',pauseTime:2}
                        ]
                      });
                      console.log(lushu)
                    }
                  }
                });
                drv.search(vehicles[i].start, vehicles[i].end);
                setTimeout(function(){
                  lushu.start();
                  circle.start();
                },1000);
              }
            }
            vehicleRun(this.vehicles);
          }

為什么右邊的覆蓋物貨車不顯示,但是紅色虛線圓圈是圖片也顯示?

回答

編輯回答