关于前端:百度地图组件封装

methods: {
    /**
     * [初始化地图]
     * @param  {options} [Object]
     * @param  {options.lonlat} [Array]  中心点经纬度
     * @param  {options.zoom} [Number]  地图等级
     * @param  {options.controlBar} [Boolean]  是否显示调试地图等级的 bar
     * @param  {options.drawMode} [Object]
     * @param  {options.drawMode.open} [Boolean]  是否关上绘制模式
     * @param  {options.drawMode.completeEvent} [function] 实现时 执行的函数
     * @param  {options.clickEvent} [function] 地图点击事件监听
     */
    init(options) {
      // 初始化地图
      let _this = this;
      this.ops = options;
      this._map = new BMap.Map(this.$refs.map);
      this._map.centerAndZoom(new BMap.Point(options.lonlat.lon, options.lonlat.lat),
        options.zoom
      );
      options.scollMove ? "" : this._map.enableScrollWheelZoom(true);
      if (options.controlBar) {
        this._map.addControl(
          new BMap.NavigationControl({
            anchor: BMAP_ANCHOR_TOP_LEFT,
            type: BMAP_NAVIGATION_CONTROL_LARGE
          })
        );
        this._map.addControl(new BMap.ScaleControl({ anchor: BMAP_ANCHOR_BOTTOM_LEFT})
        );
      }
      if (options.drawMode && options.drawMode.open) {
        this.myDrawingManagerObject = new BMapLib.DrawingManager(this._map, {
          isOpen: true,
          enableDrawingTool: false,
          drawingToolOptions: {
            anchor: BMAP_ANCHOR_TOP_LEFT,
            offset: new BMap.Size(150, 15)
          },
          circleOptions: _this.lineStyle,
          polygonOptions: _this.lineStyle,
          rectangleOptions: _this.lineStyle
        });
        _this.myDrawingManagerObject.close();
        if (options.drawMode.completeEvent) {
          this.myDrawingManagerObject.addEventListener(
            "overlaycomplete",
            function(e) {_this.overlays.push(e.overlay);
              options.drawMode.completeEvent(e);
            }
          );
        }
      }
      if (options.clickEvent)
        this._map.addEventListener("click", options.clickEvent);
    },
    /**
     * [设置中心点]
     * @param  {lonlat} [Array]
     */
    setCenter(lonlat) {// let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
      if(this.firstPointLng==null){return;}
      let point = new BMap.Point(this.firstPointLng.lng, this.firstPointLng.lat);
      this._map.setZoom(12);
      this._map.setCenter(point);
    },
    /**
     * [依据经纬度返回具体地址]
     * @param  {lonlat} [Object]
     */
    getAdress(lonlat) {return new Promise((resolve, reject) => {
        $.ajax({
          url: "api/getAddress",
          method: "GET",
          data: {
            callback: "renderReverse",
            location: `${lonlat.lat},${lonlat.lng}`,
            output: "json",
            pois: 1,
            ak: "nkdaifGOptaV7GTG0Eie3wlllVcTLnxB"
          }
        }).then(res => {let result = JSON.parse(res);
          let adress = "";
          if (result.status == 0) {console.log(result);
            adress =
              result.result.formatted_address +
              result.result.sematic_description;
            resolve(adress);
          }
        });
      });
    },
    /**
     * [依据经纬度返回百度转换后的经纬度] 下限长度为 10
     * @param  {pointArr} [Array]
     */
    convertor(pointArr) {return new Promise((resolve, reject) => {let convertor = new BMap.Convertor();
        convertor.translate(pointArr, 1, 5, translateCallback);
 
        function translateCallback(data) {if (data.status === 0) {resolve(data.points);
          }
        }
      });
    },
    //[依据经纬度返回百度转换后的经纬度] 不限长度
    async convertorAll(allPoint) {// console.log('convertorAll--allPoint.length',allPoint.length);
      var datalength = allPoint.length;
      var pageSize = 10;
      var total = 0; // 总记录数
      var groupCount = 0; // 每次转十条
      if (datalength % pageSize > 0) {groupCount = datalength / pageSize + 1;} else {groupCount = datalength / pageSize;}
      var pointRes = [];
      var sliceStart = 0,
        sliceEnd = sliceStart + pageSize;
 
      for (var i = 0; i < groupCount - 1; i++) {
        sliceStart = i * pageSize;
        sliceEnd = i * pageSize + pageSize;
        if (sliceEnd > datalength) {sliceEnd = datalength;}
        console.log("sliceStart =" + sliceStart + "sliceEnd =" + sliceEnd);
        var res = await this.convertor(allPoint.slice(sliceStart, sliceEnd));
        pointRes = pointRes.concat(res);
      }
      return pointRes;
    },
    // 转换为百度经纬度
    transforBDLonLat(allPoint) {var resPoints = [];
      allPoint.forEach((item, index) => {var res = coordTransform.transfromWGS84toBaidu(item.lat, item.lng);
        resPoints.push(new BMap.Point(res.longitude, res.latitude));
      });
      return resPoints;
    },
 
    /* 以下为画图 */
    clearAllOverlays() {
      // 革除所有图形
      this.autoOverlays.forEach(item => this._map.removeOverlay(item));
      this.overlays.forEach(item => this._map.removeOverlay(item));
      var allOverlay = this._map.getOverlays()
      allOverlay.forEach(item => this._map.removeOverlay(item));
    },
    /**
     * [绘图工具作画]
     * @param  {type} [String] 绘图类型
     */
    drawTool(type) {if (this.ops.drawMode.open) {this.myDrawingManagerObject.open();
        if (type === "circle") {this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_CIRCLE);
        } else if (type === "rectangle") {this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_RECTANGLE);
        } else if (type === "polygon") {this.myDrawingManagerObject.setDrawingMode(BMAP_DRAWING_POLYGON);
        }
      }
    },
    /**
     * [圆 / 矩形 / 多边 / 点 / 线]
     * @param  {data} [Object]
     * @param  {data.lonlat} [Array] 经纬度汇合
     * @param  {data.radius} [Number] 半径
     */
    circle(data) {console.log("--------------------- 圆形",data);
      let res = coordTransform.transfromWGS84toBaidu(data.lonlat[0].lat,
        data.lonlat[0].lng
      );
      let radius = data.radius;
      let point = new BMap.Point(res.longitude, res.latitude);
      console.log("--------------------- 圆形",point);
      let circle = new BMap.Circle(point, radius, this.lineStyle);
      console.log(circle);
      this._map.addOverlay(circle);
      circle.message = data;
      this.autoOverlays.push(circle);
      let timer = setTimeout(() => {clearTimeout(timer);
        timer = null;
        this._map.setCenter(point);
      }, 100);
    },
    rectangle(data) {console.log("--------------------- 矩形");
      let lonlat = data.lonlat;
      let resStart = coordTransform.transfromWGS84toBaidu(lonlat[0].lat,
        lonlat[0].lng
      );
      let resEnd = coordTransform.transfromWGS84toBaidu(lonlat[1].lat,
        lonlat[1].lng
      );
      let pStart = new BMap.Point(resStart.longitude, resStart.latitude);
      let pEnd = new BMap.Point(resEnd.longitude, resEnd.latitude);
      let rectangle = new BMap.Polygon(
        [new BMap.Point(pStart.lng, pStart.lat),
          new BMap.Point(pEnd.lng, pStart.lat),
          new BMap.Point(pEnd.lng, pEnd.lat),
          new BMap.Point(pStart.lng, pEnd.lat)
        ],
        this.lineStyle
      );
      this._map.addOverlay(rectangle);
      rectangle.message = data;
      this.autoOverlays.push(rectangle);
      let timer = setTimeout(() => {clearTimeout(timer);
        timer = null;
        this._map.setCenter(pStart);
      }, 100);
    },
    polygon(data) {console.log("--------------------- 多边形");
      if (!!data.lonlat && !!data.fenceType) {console.log("data.lonlat---", data.lonlat);
        data.lonlat.forEach(item => {var res = coordTransform.transfromWGS84toBaidu(item.lat, item.lng);
          item.lat = res.latitude;
          item.lng = res.longitude;
        });
      }
      let lonlat = data.lonlat;
      console.log("lonlat---", lonlat);
      let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
      let arr = [];
      lonlat.forEach(item => arr.push(new BMap.Point(item.lng, item.lat)));
      let polygon = new BMap.Polygon(arr, this.lineStyle);
      this._map.addOverlay(polygon);
      polygon.message = data;
      this.autoOverlays.push(polygon);
      let timer = setTimeout(() => {clearTimeout(timer);
        timer = null;
        this._map.setCenter(point);
      }, 100);
    },
    point(data) {
      let lonlat = data.lonlat;
      let point = new BMap.Point(lonlat[0].lng, lonlat[0].lat);
 
      let myIcon = new BMap.Icon(alertcarUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 25),
        imageOffset: new BMap.Size(0, 0)
      });
 
      let marker = new BMap.Marker(point, { icon: myIcon});
 
      this._map.addOverlay(marker);
      this.autoOverlays.push(marker);
    },
    clears(){if(this.pointContaint.length < 10){return}
      this.clearAllOverlays()
      let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 25),
          imageOffset: new BMap.Size(0, 0)
        });
        let firstPoint = new BMap.Marker(this.pointContaint[0], {icon: myIcon});
        this._map.addOverlay(firstPoint);
        let lineStyle = {
          strokeColor: "#33CC33",
          strokeWeight: 4,
          strokeOpacity: 0.5
        };
        let pointList = []
        for (let index = 0; index < this.pointContaint.length; index++) {pointList.push(new BMap.Point( this.pointContaint[index].lng, this.pointContaint[index].lat))
        }
        let polyline = new BMap.Polyline(pointList, lineStyle);
        this._map.addOverlay(polyline);
    },
    goBack(){this.clearAllOverlays()
      this.startPoint = null
      this.pointContaint = this.pointContaint.slice(0,-10)
      let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 23),
          imageOffset: new BMap.Size(0, 0)
        });
      let nowPoint = new BMap.Marker(this.pointContaint[this.pointContaint.length-1], {icon: nowIcon});
      this._map.addOverlay(nowPoint);
      let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 25),
          imageOffset: new BMap.Size(0, 0)
        });
        let firstPoint = new BMap.Marker(this.pointContaint[0], {icon: myIcon});
        this._map.addOverlay(firstPoint);
      let lineStyle = {
          strokeColor: "#33CC33",
          strokeWeight: 4,
          strokeOpacity: 0.5
        };
        let pointList = []
        for (let index = 0; index < this.pointContaint.length; index++) {pointList.push(new BMap.Point( this.pointContaint[index].lng, this.pointContaint[index].lat))
        }
        let polyline = new BMap.Polyline(pointList, lineStyle);
        this._map.addOverlay(polyline);
    },
    /**
     * [轨迹回放]
     * @param  {info} [Object]
     * @param  {info.positions} [Array]   轨迹点汇合
     * @param  {info.totalCount} [Number] 所有页数
     * @param  {info.nowCount} [Number]   当前页数
     */
    nTrace(info) {this._map.clearOverlays();
      let positions = info.positions,
        totalCount = info.totalCount,
        nowCount = info.nowCount;
      let nowInfo = {lat: positions[positions.length - 1]["latitude"],
        lng: positions[positions.length - 1]["longitude"],
        acquisitionTime: positions[positions.length - 1]["acquisitionTime"],
        uploadTime: positions[positions.length - 1]["uploadTime"],
        ...info.veh
      };
      this.nowLonlat = [nowInfo];
 
      this.convertor([new BMap.Point(nowInfo.lng, nowInfo.lat)]).then(res => {this.pointContaint.push(res[0]);
        let lineStyle = {
          strokeColor: "#B199BB",
          strokeWeight: 5,
          strokeOpacity: 0.5
        }; //strokeStyle:'dashed' 虚线
        let polyline = new BMap.Polyline(this.pointContaint, lineStyle);
        this._map.addOverlay(polyline);
        this.autoOverlays.push(polyline);
 
        let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 25),
          imageOffset: new BMap.Size(0, 0)
        });
        let firstPoint = new BMap.Marker(this.pointContaint[0], {icon: myIcon});
        this._map.addOverlay(firstPoint);
        this.autoOverlays.push(firstPoint);
 
        let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 23),
          imageOffset: new BMap.Size(0, 0)
        });
        let nowPoint = new BMap.Marker(res[0], {icon: nowIcon});
        nowPoint.addEventListener("click", () => {this.drawWindow(res[0], nowInfo);
        });
 
        this._map.addOverlay(nowPoint);
        this.autoOverlays.push(nowPoint);
 
        this.clickPoint.forEach(item => {this._map.addOverlay(item);
          this.autoOverlays.push(item);
        });
 
        this._map.setCenter(res[0]);
 
        if (this.pointContaint.length === 1) {this._map.setZoom(17);
        } else {this._map.setZoom(this._map.getZoom());
        }
      });
    },
    // 轨迹回放批改 追加线段不清空重绘
    nTraceAppend(info) {// this._map.clearOverlays();
      var allOverlay = this._map.getOverlays();
      allOverlay.forEach(item => {if (item.toString() == "[object Marker]") {if (item.getTitle() == "end") {this._map.removeOverlay(item);
          }
        }
      });
      let positions = info.positions,
        totalCount = info.totalCount,
        nowCount = info.nowCount;
      let nowInfo = {lat: positions[positions.length - 1]["latitude"],
        lng: positions[positions.length - 1]["longitude"],
        acquisitionTime: positions[positions.length - 1]["acquisitionTime"],
        uploadTime: positions[positions.length - 1]["uploadTime"],
        ...info.veh
      };
      this.nowLonlat = [nowInfo];
 
      this.convertor([new BMap.Point(nowInfo.lng, nowInfo.lat)]).then(res => {this.pointContaint.push(res[0]);
        if (this.startPoint === null) {this.startPoint = res[0];
        }
        this.endPoint = res[0];
        let pointList = [];
        pointList.push(this.startPoint);
        pointList.push(this.endPoint);
 
        let lineStyle = {
          strokeColor: "#33CC33",
          strokeWeight: 4,
          strokeOpacity: 0.5
        }; //strokeStyle:'dashed' 虚线
        let polyline = new BMap.Polyline(pointList, lineStyle);
        this.startPoint = res[0];
        this._map.addOverlay(polyline);
        this.autoOverlays.push(polyline);
 
        let myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 25),
          imageOffset: new BMap.Size(0, 0)
        });
        let firstPoint = new BMap.Marker(this.pointContaint[0], {icon: myIcon});
 
        this._map.addOverlay(firstPoint);
        this.autoOverlays.push(firstPoint);
 
        let nowIcon = new BMap.Icon(carUrl, new BMap.Size(23, 25), {anchor: new BMap.Size(10, 23),
          imageOffset: new BMap.Size(0, 0)
        });
        let nowPoint = new BMap.Marker(res[0], {icon: nowIcon});
        nowPoint.setTitle("end");
        nowPoint.addEventListener("click", () => {this.drawWindow(res[0], nowInfo);
        });
        this._map.addOverlay(nowPoint);
        this.autoOverlays.push(nowPoint);
        this.clickPoint.forEach(item => {this._map.addOverlay(item);
          this.autoOverlays.push(item);
        });
 
        this._map.setCenter(res[0]);
 
        if (this.pointContaint.length === 1) {this._map.setZoom(17);
        } else {this._map.setZoom(this._map.getZoom());
        }
      });
    },
    // 清空轨迹回放的数据
    traceEmptyArr() {this.pointContaint = [];
      this.clickPoint = [];
      this.autoOverlays = [];
      this.startPoint = null;
      this.endPoint = null;
    },
    // 燃油车轨迹
    async nTraceFuel(info) {
      let _this = this;
      this.effecLocaIden = 0; // 无效定位标识
      this.locationStatus = false; // 以后定位无效状态
      this.invalocaStart = 0; // 有效定位虚线起始点
      this.invalocaEnd = 0;
      let lineSolidStyle = {
        strokeColor: "#33CC33",
        strokeWeight: 4,
        strokeOpacity: 0.5
      }; // 实线
      let lineDashedStyle = {
        strokeColor: "#A52A2A",
        strokeWeight: 4,
        strokeOpacity: 0.5,
        strokeStyle: "dashed"
      }; // 虚线
      let startIcon = new BMap.Icon(startUrl, new BMap.Size(45, 45), {anchor: new BMap.Size(10, 25),
        imageOffset: new BMap.Size(0, 0)
      });
      let endIcon = new BMap.Icon(endUrl, new BMap.Size(45, 45), {anchor: new BMap.Size(10, 23),
        imageOffset: new BMap.Size(0, 0)
      });
      var allPoint = [];
      for (var i = 0; i < info.length; i++) {var item = info[i];
        if (item.effLocation == this.effecLocaIden) {
          // 无效定位
          if (!this.locationStatus) {
            // 上一状态为有效
            if (this.invalocaStart == 0) {
              // 起始点
              allPoint.push(new BMap.Point(item.lng, item.lat));
              _this.firstPointLng=allPoint[0];
              let res = await this.convertor([new BMap.Point(item.lng, item.lat)
              ]);
              let startPoint = new BMap.Marker(res[0], {icon: startIcon});
              this._map.addOverlay(startPoint);
              this.autoOverlays.push(startPoint);
              console.log("起始点 i =" + i);
              this._map.setCenter(allPoint[0]);
              this._map.setZoom(this._map.getZoom());
            } else {console.log("画虚线 i=" + i);
              this.invalocaEnd = new BMap.Point(item.lng, item.lat);
              let res = await this.convertor([
                this.invalocaStart,
                this.invalocaEnd
              ]);
              console.log("res-- 虚线 ---", res);
              let polyline = new BMap.Polyline(res, lineDashedStyle);
              this._map.addOverlay(polyline);
              this.autoOverlays.push(polyline);
              this.invalocaStart = 0;
              this.invalocaEnd = 0;
              allPoint.push(new BMap.Point(item.lng, item.lat));
            }
          } else {allPoint.push(new BMap.Point(item.lng, item.lat));
          }
          if (i == info.length - 1) {
            // 终止点
            console.log("终止点 i =" + i);
            // console.log('allPoint',allPoint);
            if (allPoint.length > 0) {
              // 最初一段轨迹
              // let res = await this.convertorAll(allPoint)
              let res = this.transforBDLonLat(allPoint);
              console.log("画实线 最初一段 i=" + i);
              let polyline = new BMap.Polyline(res, lineSolidStyle);
              this._map.addOverlay(polyline);
              this.autoOverlays.push(polyline);
            }
            // 完结图标
            let res = await this.convertor([new BMap.Point(item.lng, item.lat)
            ]);
            let EndPoint = new BMap.Marker(res[0], {icon: endIcon});
            this._map.addOverlay(EndPoint);
            this.autoOverlays.push(EndPoint);
          }
          this.locationStatus = true;
        } else {
          // 有效定位
          if (i == info.length - 1) {
            // 最初一段是有效定位
            // 完结图标
            let res = await this.convertor([this.invalocaStart]);
            console.log("res-----", res);
            let EndPoint = new BMap.Marker(res[0], {icon: endIcon});
            this._map.addOverlay(EndPoint);
            this.autoOverlays.push(EndPoint);
            console.log("最初为有效定位的完结图标 i=" + i);
          } else {if (this.locationStatus && allPoint.length > 0) {this.invalocaStart = allPoint[allPoint.length - 1];
              // let res = await this.convertorAll(allPoint);
              let res = this.transforBDLonLat(allPoint);
              // console.log('--- 有效定位 ------res',res);
              console.log("画实线 两头段 i=" + i);
              let polyline = new BMap.Polyline(res, lineSolidStyle);
              this._map.addOverlay(polyline);
              this.autoOverlays.push(polyline);
              allPoint = [];}
          }
          // console.log('allPoint.length =' + allPoint.length);
          this.locationStatus = false;
        }
      }
    },
    // 显示定位
    setCommMarker(carInfo) {console.log("--------------- 显示定位", carInfo);
      let point = new BMap.Point(carInfo.longitude, carInfo.latitude),
        myIcon = new BMap.Icon(onlinecarUrl, new BMap.Size(30, 30), {anchor: new BMap.Size(8, 8),
          imageOffset: new BMap.Size(0, 0)
        });
      this.convertor([point]).then(res => {this.clickPoint = [];
        let marker = new BMap.Marker(res[0], {icon: myIcon});
        this._map.addOverlay(marker);
        this.autoOverlays.push(marker);
 
        let timer = setTimeout(() => {this._map.setZoom(17);
          this._map.setCenter(res[0]);
          // this.drawWindow(res[0], carInfo);
          clearTimeout(timer);
          timer = null;
        }, 200);
 
        // marker.addEventListener("click", () => {//     this.drawWindow(res[0], carInfo);
        // });
        // this.clickPoint.push(marker)
      });
    },
 
    /**
     * [设置 marker]
     * @param  {carInfo} [Object]
     */
    setTraceMarker(carInfo) {let point = new BMap.Point(carInfo.longitude, carInfo.latitude),
        myIcon = new BMap.Icon(carPoint, new BMap.Size(10, 10), {anchor: new BMap.Size(8, 8),
          imageOffset: new BMap.Size(0, 0)
        });
      this.convertor([point]).then(res => {this.clickPoint = [];
        let marker = new BMap.Marker(res[0], {icon: myIcon});
        this._map.addOverlay(marker);
        this.autoOverlays.push(marker);
 
        let timer = setTimeout(() => {this._map.setZoom(this._map.getZoom());
          this._map.setCenter(res[0]);
          this.drawWindow(res[0], carInfo);
          clearTimeout(timer);
          timer = null;
        }, 200);
 
        marker.addEventListener("click", () => {this.drawWindow(res[0], carInfo);
        });
        this.clickPoint.push(marker);
      });
    },
    /**
     * [车辆信息窗口]
     * @param  {location} [Array]
     * @param  {carInfo} [Object]
     */
    drawWindow(location, carInfo) {if (carInfo.acquisitionTime) {
        carInfo.acquisitionTime = NUtil.Format(new Date(carInfo.acquisitionTime),
          "yyyy-MM-dd hh:mm:ss"
        );
      }
      let opts = {
        width: 300, // 信息窗口宽度
        height: 0, // 信息窗口高度
        title: `<h5>
                                <div 
                                style="overflow:hidden;margin-top:0px;z-index:100;"
                                class="colseWindow" 
                                >
                                    <span style="
                                        float:right;
                                        cursor:pointer"onmouseover="this.style.color='red';"onmouseleave="this.style.color='black';"
                                    > 敞开 </span>
                                </div>
                            <h5>`,
        enableCloseOnClick: true
      };
 
      let InfoMsg = `
                    <div class="map-obox" style="height: 320px">
                        <div>vin 码：${carInfo.vin ? carInfo.vin : ""}</div>
                        <div> 设施号：${carInfo.deviceSN ? carInfo.deviceSN : ""}</div>
                        <div>ICCID：${carInfo.iccid ? carInfo.iccid : ""}</div>
                        <div class="alertInfo"></div>
                        <div> 经销商：${carInfo.dealerName ? carInfo.dealerName : ""}</div>
                        <div> 车主姓名：${carInfo.ownerName ? carInfo.ownerName : ""}</div>
                        <div> 车牌号：${carInfo.licensePlate ? carInfo.licensePlate : ""}</div>
                        <div> 车辆品牌：${carInfo.brandName ? carInfo.brandName : ""}</div>
                        <div> 车型名称：${carInfo.modelName ? carInfo.modelName : ""}</div>
                        <div class="alertTime"></div>
                        <div> 采集工夫：${NUtil.Format(new Date(carInfo.acquisitionTime),
                          "yyyy-MM-dd hh:mm:ss"
                        )}</div>
                        <div> 上传工夫：${NUtil.Format(new Date(carInfo.uploadTime),
                          "yyyy-MM-dd hh:mm:ss"
                        )}</div>
                        <div class="address"></div>
                        <div> 经度：${
                          carInfo.lng
                            ? carInfo.lng
                            : carInfo.longitude
                            ? carInfo.longitude
                            : ""
                        }</div>
                        <div> 纬度：${
                          carInfo.lat
                            ? carInfo.lat
                            : carInfo.latitude
                            ? carInfo.latitude
                            : ""
                        }</div>
                    </div>
                `;
 
      let infoWindow = new BMap.InfoWindow(InfoMsg, opts);
      let _this = this;
      _this._map.openInfoWindow(infoWindow, location);
      let params = {
        deviceId: carInfo.vin,
        deviceType: "VEHICLE",
        handleStates: "0",
        pageIndex: 1,
        pageSize: 1
      };
      _this.$http.get("api/getAlertStat", { params}).then(res => {if (res.status && res.data.level1) {$(".alertInfo").text(` 报警状态：一级报警：${res.data.level1} 个，二级报警：${res.data.level2} 个，三级报警：${res.data.level3} 个 `
          );
        }
      });
      _this.$http
        .get("api/findStatusHistoryByTimeRange", { params})
        .then(res => {if (res.body.status && res.body.datas && res.body.datas.length) {$(".alertTime").text(
              ` 最初状态工夫：${NUtil.Format(new Date(res.body.datas[0].uploadTime),
                "yyyy-MM-dd hh:mm:ss"
              )}`
            );
          }
        });
 
      _this.getAdress(location).then(res => {$(".address").text(` 最新地址：${res ? res : ""}`);
      });
 
      let timer = setTimeout(() => {
        // 延时保障可能执行
        $(".colseWindow").click(function() {_this._map.closeInfoWindow();
          clearTimeout(timer);
          timer = null;
        });
        _this._map.setCenter(location);
      }, 400);
    },
    sarchdatil(address_detail) {
      var th = this;
      // 创立 Map 实例
      // 初始化地图, 设置中心点坐标，var point = new BMap.Point(121.160724, 31.173277); // 创立点坐标，汉得公司的经纬度坐标
      var ac = new BMap.Autocomplete({ // 建设一个主动实现的对象
        input: "suggestId",
        location: th._map
      });
      var myValue;
      ac.addEventListener("onconfirm", function(e) {
        // 鼠标点击下拉列表后的事件
        console.log(e);
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        this.address_detail = myValue;
        this.address_detail_set = myValue;
        setPlace();});
 
      function setPlace() {th._map.clearOverlays(); // 革除地图上所有覆盖物
        function myFun() {th.userlocation = local.getResults().getPoi(0).point; // 获取第一个智能搜寻的后果
          th._map.centerAndZoom(th.userlocation, 18);
          th._map.addOverlay(new BMap.Marker(th.userlocation)); // 增加标注
        }
 
        var local = new BMap.LocalSearch(th._map, {
          // 智能搜寻
          onSearchComplete: myFun
        });
        local.search(myValue);
 
        // 测试输入坐标（指的是输入框最初确定地点的经纬度）th._map.addEventListener("click", function(e) {
          // 经度
          console.log('lng=====',th.userlocation.lng);
          localStorage.setItem("longitude", th.userlocation.lng);
          // 维度
          console.log('lat======',th.userlocation.lat);
          localStorage.setItem("latitude", th.userlocation.lat);
        });
        th.address_detail = th.address_detail_set;
        th.dawnFunc();}
    },
    clearOverlays(){this._map.clearOverlays();
    }
  },