无法读取未定义的属性“绘图”

Question

我正在使用 AGM地图通过Google提供的绘图工具绘制区域的自定义边界。

这是我的代码段。

  AgmCoreModule.forRoot({
  apiKey: 'here my api_key',
  libraries: ['visualization', 'places', 'drawing']
})

 ngAfterViewInit() {
  //debugger;
    this.mapsAPILoader.load().then(() => {
      // tslint:disable-next-line:no-debugger
     // debugger;
           this.handleGoogleMapApi(map);

    });
  }

  handleGoogleMapApi(google) {
     this.map1 = google;
    // tslint:disable-next-line:no-debugger
    debugger;
     const drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.CIRCLE,
          google.maps.drawing.OverlayType.POLYGON,
          google.maps.drawing.OverlayType.POLYLINE,
          google.maps.drawing.OverlayType.RECTANGLE
        ]
      },
      circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });
    drawingManager.setMap(this.map1);
  }

以下是我的控制台错误

感谢您的帮助...

Answer 1

您好，您抛出的错误只是说“ google.maps”未定义。我建议您使用console.log（'google.maps'）;跟踪对象的状态。

初始化对象时，您可能缺少重要的步骤。

Answer 2

变量google在函数参数handleGoogleMapApi(google)的右边。

  handleGoogleMapApi(_google) {
     this.map1 = _google;
    // tslint:disable-next-line:no-debugger
    debugger;
     const drawingManager = new google.maps.drawing.DrawingManager({
      drawingMode: google.maps.drawing.OverlayType.POLYGON,
      drawingControl: true,
      drawingControlOptions: {
        position: google.maps.ControlPosition.TOP_CENTER,
        drawingModes: [
          google.maps.drawing.OverlayType.MARKER,
          google.maps.drawing.OverlayType.CIRCLE,
          google.maps.drawing.OverlayType.POLYGON,
          google.maps.drawing.OverlayType.POLYLINE,
          google.maps.drawing.OverlayType.RECTANGLE
        ]
      },
      circleOptions: {
        fillColor: '#ffff00',
        fillOpacity: 1,
        strokeWeight: 5,
        clickable: false,
        editable: true,
        zIndex: 1
      }
    });
    drawingManager.setMap(this.map1);
  }