angularjs 相关问题

我使用@angular/google-maps”：“^17.3.5”和角度“^17.3.5” 我尝试获取我的谷歌地图的参考我使用 @angular/google-maps": "^17.3.5" 和 Angular "^17.3.5" 我尝试获取我的谷歌地图的参考 <google-map #map mapId="map" height="100%" width="100%" [options]="options"</google-map> 来自我的组件。然而，@ViewChild(GoogleMap) map!: GoogleMap;似乎不起作用。当我尝试在ngAfterViewInit()中使用它时： ngAfterViewInit(): void { this.map.googleMap!.fitBounds({ north: 43.516034, south: 43.423021, east: 5.471529, west: 5.456153, }); } 我得到： ERROR TypeError: Cannot read properties of undefined (reading 'googleMap') 使用 mapInitialized 似乎有效，但是，然后我只得到 google.map.Map 而不是 GoogleMap。我不确定这在某种程度上是否是一个缺点。 <google-map #map (mapInitialized)="initMap($event)" mapId="map" height="100%" width="100%" [options]="options"></google-map>` 组件： map!: google.maps.Map initMap(map: google.maps.Map) { this.map = map; this.initAdvancedMarkers() } async initAdvancedMarkers() { const {AdvancedMarkerElement} = await google.maps.importLibrary("marker") as google.maps.MarkerLibrary; let markers = [ { lat: 43.516034, lng: 5.471529, }, { lat: 43.523021, lng: 5.456153, }, { lat: 43.423021, lng: 5.456153, }, ]; let bounds = new google.maps.LatLngBounds(); // Set markers and fit bounds to show all markers markers.forEach((marker: any) => { new AdvancedMarkerElement({ map: this.map, position: marker }); bounds.extend( new google.maps.LatLng(marker.lat, marker.lng) ); }); this.map.fitBounds(bounds); } 我找不到使用当前版本的谷歌地图执行此操作的正确示例，因此任何正确方向的提示将不胜感激。问题不可重现，请确保 @if 或 *ngIf 中没有 google 地图元素，这可能会阻止您访问它！否则您可以尝试切换静态标志并检查它是否解决您的问题！ @ViewChild(GoogleMap, { static: true }) map!: GoogleMap; // or @ViewChild(GoogleMap, { static: false }) map!: GoogleMap; 工作 stackblitz，其中视图子项正常出现，如下！完整代码： import { Component, ViewChild } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import { GoogleMap } from '@angular/google-maps'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [GoogleMap], template: `  <google-map height="400px" width="750px" [center]="center" [zoom]="zoom" (mapClick)="moveMap($event)" (mapMousemove)="move($event)" /> <div>Latitude: {{display?.lat}}</div> <div>Longitude: {{display?.lng}}</div> `, }) export class App { @ViewChild(GoogleMap, { static: true }) map!: GoogleMap; center: google.maps.LatLngLiteral = { lat: 24, lng: 12 }; zoom = 4; display!: google.maps.LatLngLiteral | undefined; ngAfterViewInit(): void { console.log(this.map); this.map.googleMap!.fitBounds({ north: 43.516034, south: 43.423021, east: 5.471529, west: 5.456153, }); } moveMap(event: google.maps.MapMouseEvent) { this.center = <google.maps.LatLngLiteral>event.latLng?.toJSON(); } move(event: google.maps.MapMouseEvent) { this.display = event.latLng?.toJSON(); } } bootstrapApplication(App); Stackblitz 演示

angular angularjs

回答 1 投票 0

使用 FormArray 在 Angular 中添加排序

Angular 新手。我有一个输入类 Foo，其中有一个书籍列表，其中 Book 类具有 Id、Title 和 Description 属性。我将其显示在带有输入的表格中，以便用户可以添加、编辑或删除...

angular angularjs typescript sorting material-ui

回答 1 投票 0

我们可以使用扩展运算符来合并数组吗？ [已关闭]

将两个变量 a 和 b 作为两个不同的数组，变量 c 仅在一个数组中显示输出，这意味着该方法将两个或多个数组合并为一个数组让a=[a,b]; 让...

javascript angular angularjs typescript

回答 3 投票 0

AngularJS，根据另一个数组当前位置显示数组值

在javascript中，有两个数组，它们的长度相等，但长度是未知的，基于一些db值。例如 colName=['col1','col2','col3']; fieldValue=['abc','def','ghi']; 或者上校...