Карты Google (google.maps.drawing.DrawingManager) не обновляются после применения изменений.

Question

сообщество Мне нужна ваша помощь.

Я построил систему, которая выбирает маркеры из оверлея прямоугольной формы. та же система, что и при перетаскивании мышью нескольких файлов.

В моем случае я выбираю несколько маркеров этим методом. Моя проблема заключается в том, что выделенная область, созданная с помощью мыши, не обновляет цвет наложения.

Что я делаю, так это.

шаг 1

Если пользователь наведет курсор мыши на карту, которую я получу, и сохраню эту позицию в формате пикселей, например: Пример:

   google.maps.event.addListener(this.map, 'mousedown', (e) => {

      this.drawingManager.setMap(null);
      this.mouseDownState = true;

      console.log(e);
      console.log(this.rectangle);

      if (this.rectangle !== undefined) {
        this.rectangle.setMap(null);
        // console.log({inside: '...', bounds: '...'});
      }

      this.changeToYellow();

    });

На втором шаге:

если (last_mouse_down_x> mouse_move_x) я установил цвет прямоугольника на зеленый

if (last_mouse_down_x

Проблема, с которой я сталкиваюсь, заключается в том, что эти цвета применяются не всегда, иногда наложение является красным в положительном направлении и наоборот

Я хочу обновить прямоугольник, который выбирает маркеры, но моя основная проблема заключается в том, что изменения не применяются быстро, это не в реальном времени справа, чтобы цвет прямоугольника был синим, если я хочу, чтобы прямоугольник был красным.

Что мне нужно сделать, чтобы изменения вступили в силу немедленно?

Извините, я не могу использовать переполнение стека скриншотов, не позволяйте мне.

Полный код

  /**
   * Renders the map on the page.
   */
  initDraw() {


    // Create a drawing manager attached to the map to allow the user to draw markers, lines, and shapes.
    this.drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: null,
      drawingControlOptions: { drawingModes: [ google.maps.drawing.OverlayType.RECTANGLE ] },
      rectangleOptions: this.rectOptions,
      map: this.map,
      drawingControl: false // hides the drawing controls
    });



    // Add a listener on the map.
    google.maps.event.addListener(this.drawingManager, 'overlaycomplete', (e) => {

      console.log(e);

      this.rectangle = e.overlay;
      this.rectangle.type = e.type;


      // cancel drawing mode
      if (this.shift_draw === false) { this.drawingManager.setDrawingMode(null); }

      if (e.type === google.maps.drawing.OverlayType.RECTANGLE) {

        if (this.rectangle !== null) {
          this.rectangle.setMap(null);
        }


        const lastBounds = this.rectangle.getBounds();

        // console.log(lastBounds);

        // determine if markers is inside bounds:
        this.checkInterceptionInRect(lastBounds, this.markers);

      }


      this.drawingManager.setMap(null); // <====== Does It Need This?
      this.drawingManager.setMap(this.map); // <====== Does It Need This?


    });


    this.shift_draw = false;


    google.maps.event.addListener(this.map, 'mousedown', (e) => {

      this.drawingManager.setMap(null);
      this.mouseDownState = true;

      console.log(e);
      console.log(this.rectangle);

      if (this.rectangle !== undefined) {
        this.rectangle.setMap(null);
        // console.log({inside: '...', bounds: '...'});
      }

      this.changeToYellow();

    });



    google.maps.event.addListener(this.map, 'mouseup', (e) => {
      console.log('Mouse up: ');
      this.mouseDownState = false;
    });


    google.maps.event.addListener(this.map, 'drag', (e) => {

      if (this.rectangle !== undefined) {
        this.rectangle.setMap(null);
        // console.log({inside: '...', bounds: '...'});
      }

    });


    this.drawingManager.setMap(this.map);

  }


  onMouseDown(e) {
    // console.log(e);
    console.log('Mouse down');
    this.mouseDownPosition = null;
    this.mouseDownPosition = e;
  }


  onMouseUp(e) {
    console.log('Mouse up');
    this.mouseDownState = false;
    console.log(e);
  }




  //
  onMouseMove(e) {

    this.mousePos = { x: e.x, y: e.y };

    if (this.mouseDownState) {

      // this.drawingManager.setMap(null);
      console.log(this.drawingManager);

      // this.drawingManager.setDrawingMode(null);


      if (e.x >= this.mouseDownPosition.x ) {
        this.selectionType = 'add';
        // console.log('+++++++++++++');
        console.log({new: e.x, old:  this.mouseDownPosition.x});
        this.changeToBlue();

      } else {
        this.selectionType = 'remove';
        // console.log('-------------');
        console.log({new: e.x, old:  this.mouseDownPosition.x});
        this.changeToRed();
      }

      console.log('SELECTION TYPE: ', this.selectionType);
      this.drawingManager.setMap(this.map);

      // const options = this.drawingManager.get('rectangleOptions');
      // console.log('GET OPTIONS: ', options);

      // options.fillColor = 'yellow';
      // options.strokeColor = 'purple';
      // this.drawingManager.set('rectangleOptions', options);

    }

  }

  changeToRed() {
    this.drawingManager.setOptions({ rectangleOptions: {strokeColor: 'red', fillColor: 'red'} });
    this.drawingManager.setMap(this.map);
  }

  changeToBlue() {
    this.drawingManager.setOptions({ rectangleOptions: {strokeColor: 'dodgerblue', fillColor: 'dodgerblue'} });
    this.drawingManager.setMap(this.map);
  }

  changeToYellow() {
    this.drawingManager.setOptions({ rectangleOptions: {strokeColor: 'yellow', fillColor: 'yellow'} });
    this.drawingManager.setMap(this.map);
  }