应用更改后，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）我将矩形设置为绿色

     

如果（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);
  }