Javascript 如何在app.component.html中更改地图的宽度和高度

在下面发布的代码中，我正在尝试更改地图的宽度和高度，如下面样式标记中所示

<style>
     #map3 .map {
        width: 100%;
        height:90px;
      }

</style>

---

让我们看看这里。首先，打开的图层贴图是在

画布上绘制的，一旦渲染后，css将无法调整画布的大小。因此，您需要做的是在组件
类中以编程方式调整大小

因此，我们将实现
ngAfterViewInit
函数，因为我们需要一个已渲染的映射引用，因此我们有以下功能：

//...
ngAfterViewInit() {
  this.map.updateSize();
}
//...

这应该可以很好地工作，但是其他MapAPI的想法也是一样的。
canvas
在任何其他
html
之前首先在浏览器中呈现，因此在加载应用程序重置时，
canvas
将失真，因此一旦加载应用程序的所有其他组件，您将需要调整其大小

例如：


map.component.html

作为参考，您可以查看此堆栈交换以了解更多详细信息


希望能有所帮助
您能举个例子让我更好地理解吗？您能告诉我问题是什么吗？签名…我认为它可以直接从html文件更改
？
称为空安全运算符或安全导航运算符。它通过首先检查您试图访问的引用是否未定义来防止未定义的错误，以了解有关
？
    ngOnInit() {
    var mousePositionControl = new MousePosition({
      className: 'custom-mouse-position',
      coordinateFormat: createStringXY(7),
      projection: 'EPSG:4326',
      /*render: function(){
        console.log(createStringXY(7));
      },*/
      // comment the following two lines to have the mouse position
      // be placed within the map.
      target: document.getElementById('mouse-position'),
      undefinedHTML: '',//for what to be rendered when the mouse leaves map scope: values https://openlayers.org/en/latest/apidoc/module-ol_control_MousePosition-MousePosition.html
    });
  
    this. map = new Map({
      controls: defaultControls().extend([mousePositionControl]),
    target: 'map3',
    layers: [
      new TileLayer({
        source: new XYZSource({
          url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.jpg'
        })
      })
    ],
    view: new View({
      center: [0, 0],
      zoom: 2
    })
  });

  var projectionSelect = document.getElementById('projection');
    projectionSelect.addEventListener('change', function (event) {
      mousePositionControl.setProjection((event.target as HTMLSelectElement).value);
    });

    var precisionInput = document.getElementById('precision');
    precisionInput.addEventListener('change', function (event) {
    var format = createStringXY((event.target as HTMLInputElement).valueAsNumber);
    mousePositionControl.setCoordinateFormat(format);
    console.log(createStringXY(format));
  });
  
  this.map.on('dblclick', function(evt){
    // Get the pointer coordinate
    //let coordinate = transform(evt.coordinate);
    var lonlat = transform(evt.coordinate, 'EPSG:3857', 'EPSG:4326')
    console.log(lonlat);
  });

  var zoomslider = new ZoomSlider();
  this.map.addControl(zoomslider);
 }

//...
ngAfterViewInit() {
  this.map.updateSize();
}
//...

<div id="map"></div>

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.scss']
})
export class MapComponent implements OnInit, AfterViewInit {
  // define a reference to the map
  map: any | undefined;

  // So you will then initialize the map as you have in your code
  ngOnInit() {
    this. map = new Map({
      target: 'map',,
      view: new View({
        center: [0, 0],
        zoom: 2
      })
    });
  }

  // So after angular has rendered all the html stuff, it will call this function
  // down here, so then what you want to do is update the map size, now that
  // the rendering is stable
  ngAfterViewInit() {
    this.map?.updateSize();
  }

  //...
  // Then down here you will have the remaining functionality that you add to
  // your code.
}