angular - 如何将 value.lng 分配给 [纬度] 和 [经度]？

Question

图片

从列表中选择一个城市时，我想将经度和纬度传输到地图上

<form class="example-form">
  <mat-form-field class="example-full-width">
    <mat-label>Town/Settlement</mat-label>
    <input type="text"
           placeholder="Pick one"
           aria-label="Town/Settlement"
           matInput
           [matAutocomplete]="auto">
    <mat-autocomplete #auto="matAutocomplete">
      <mat-option *ngFor="let value of mainService.city; index as i"  [value]="value.city_ascii" (click)="toggle(value)">
          {{value.city_ascii}}
      </mat-option>
    </mat-autocomplete>
  </mat-form-field>

  <agm-map [latitude] [longitude]>
    <agm-marker [latitude] [longitude]></agm-marker>
  </agm-map>
</form>

Answer 1

mat-autocomplete 在其 API 中有几个输出 - https://material.angular.io/components/autocomplete/api。所以你需要从 mat-option 中删除一个点击事件并像

<mat-autocomplete #auto="matAutocomplete" (optionSelected)="toggle(value)">

如果我正确理解了组件类中的逻辑

旁注：从 Angular 9 开始，有一个原始的 Angular 组件（https://www.npmjs.com/package/@angular/google-maps）。它比 agm 轻得多。在这里你可以找到一些使用它的例子 - https://timdeschryver.dev/blog/google-maps-as-an-angular-component