高德地圖信息窗體輪播及多組坐標點添加

首先，信息窗體輪播，高德地圖同時只能存在一個信息窗體，所以實現輪播只需要一個定時器更新位置就可以，另外信息窗體的關閉我選擇的方式是設置不可見，即利用visible屬性設置可見不可見

其次，因項目需要，地圖上需要展示兩個窗體並實現聯動輪播，但是信息窗體只能有一個，因此二級信息窗體采用了自定義label來實現，通過對需要展示的坐標點添加label，其他坐標點則清空label

  private changeScene(i: any) {
    this.zoom = 14;
    this.sceneInfoWindow.visible = true;
    this.dataNow.scene = this.sceneData[i];
    this.center = this.dataNow.scene.position;
    this.sceneInfoWindow.name = this.dataNow.scene.name;
    this.sceneInfoWindow.position = this.dataNow.scene.position;
    this.getSceneLine();
    this.getScenePark();
  }
  private changePark(i: any) {
    const map = this.amapManager.getMap();
    this.parkIndex = i;
    map.remove(this.parkMarkerData);
    this.parkMarkerData.forEach((v: any) => {
      v.setLabel({});
    });
    this.parkMarkerData[i].setLabel({
      content: '<div class="info"><div>' + this.parkData[i].parking_name + '</div><div class="infoBody">剩余泊位數:' + this.parkData[i].free_num + '/' + this.parkData[i].open_num + '</div><div class="infoBody">與該景區距離' + (this.parkData[i].distance / 1000).toFixed(2) + 'km</div></div>',
      offset: new AMap.Pixel(-20, -60),
    });
    map.add(this.parkMarkerData);
  }
  private getScene() {
    apiStationScene().then((res: any) => {
      if (res.status === 200 && res.data && res.data.rc === 0 && res.data.obj && res.data.obj.length) {
        const data: any[] = res.data.obj;
        const marker: any = [];
        data.forEach((v: any, n: number) => {
          v.position = [v.lng, v.lat];
          marker.push({
            id: v.id,
            position: v.position,
            text: v.name,
            index: n,
            label: {},
            icon: 'img/fengjing.png',
            // events: {
            //   click: () => {
            //     this.changeScene(n);
            //   },
            // },
          }),
          v.pic_paths = v.pic_paths.split(',');
        });
        this.markerData = marker;
        this.sceneData = data;
        this.changeScene(0);
      }
    });
  }
  private getScenePark() {
    const par = {
      lng: this.dataNow.scene.lng,
      lat: this.dataNow.scene.lat,
    };
    apiStationScenePark(par).then((res: any) => {
      if (res.status === 200 && res.data && res.data.rc === 0 && res.data.obj && res.data.obj.length) {
        const data: any[] = res.data.obj;
        this.dataNow.park = data.sort((a, b) => {
          return b.free_num - a.free_num;
        });
        data.forEach((v: any, n: number) => {
          v.position = [v.lng, v.lat];
        });
        this.parkData = data.splice(0, 3);
        this.addParkMarkers();
      } else {
        this.parkData = [];
        if (this.parkInerval) {
          clearInterval(this.parkInerval);
          this.parkInerval = null;
        }
        if (this.parkMarkerData) {
          const map = this.amapManager.getMap();
          map.remove(this.parkMarkerData);
          this.parkMarkerData = [];
        }
      }
    });
  }
  // 添加停車場坐標點
  private addParkMarkers() {
    if (this.parkInerval) {
      clearInterval(this.parkInerval);
      this.parkInerval = null;
    }
    const map = this.amapManager.getMap();
    map.remove(this.parkMarkerData);
    const parkMarker: any = [];
    this.parkData.forEach((v: any, i: any) => {
      const marker = new AMap.Marker({
        position: new AMap.LngLat(v.lng, v.lat),
        icon: new AMap.Icon({
          image: 'img/tingchechang.png',
          size: new AMap.Size(40, 40),  // 圖標大小
          imageSize: new AMap.Size(40, 40),
        }),
        label: {
          content: i === 0 ? '<div class="info">這里寫內容即可，可自定義樣式</div>' : '',
          offset: new AMap.Pixel(-20, -60),
        },
      });
      parkMarker.push(marker);
    });
    map.add(parkMarker);
    this.parkMarkerData = parkMarker;
    this.parkList();
  }
 // 控制停車場信息滾動
  get parkListScroll() {
    return {
      singleHeight: 43.75,
      waitTime: 5000,
      step: 1,
      limitMoveNum: 15,
    };
  }
  // 景點切換
  private sceneList() {
    this.sceneInerval = setInterval(() => {
      this.nowId++;
      if (this.nowId > this.sceneData.length) {
        this.nowId = 0;
      }
      this.changeScene(this.nowId);
    }, 90000);
  }
  // 停車場切換
  private parkList() {
    this.parkInerval = setInterval(() => {
      this.parkId++;
      if (this.parkId === this.parkMarkerData.length) {
        this.parkId = 0;
        clearInterval(this.parkInerval);
        this.parkInerval = null;
        this.parkList();
      }
      this.changePark(this.parkId);
    }, 3000);
  }
  private closeSenceWindow() {
    this.sceneInfoWindow.visible = false;
  }

另外：關於定時器，在且未聲明賦值給一個變量的時候，重復調用會創建新的定時器占用大量內存，賦值給一個變量后重復調用會重置，利用時需要記得清理。

添加label屬性時需要重繪坐標點，可直接將准備好的坐標點組對象添加至地圖，如通過add添加，重復調用相同的繪點方法，第二次數組轉變為坐標點時會報錯，因為數組性質發生了變化，變成了地圖的坐標點組對象。