高德地图信息窗体轮播及多组坐标点添加

首先，信息窗体轮播，高德地图同时只能存在一个信息窗体，所以实现轮播只需要一个定时器更新位置就可以，另外信息窗体的关闭我选择的方式是设置不可见，即利用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添加，重复调用相同的绘点方法，第二次数组转变为坐标点时会报错，因为数组性质发生了变化，变成了地图的坐标点组对象。