如何将 value.lng 分配给 [latitude] 和 [longitude]？

Question

image

when choosing a city from the list, I want to transfer the longitude and latitude to the map

<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)">

如果我理解正确的话，组件中的逻辑是什么class

旁注：从 angular 9 开始有一个原始的 angular 组件 (https://www.npmjs.com/package/@angular/google-maps). it's much more lightweight than agm. here you can find some examples of using it - https://timdeschryver.dev/blog/google-maps-as-an-angular-component

如何将 value.lng 分配给 [latitude] 和 [longitude]？

How do I assign value.lng to [latitude] and [longitude]?

angular

agm

mat-form-field