-1

当我在 agm-map 上使用函数 (boundsChange) 时，我正在使用来自 google @agm-core 的 Angular Maps 和 agm-overlay 的自定义标记，我收到错误 invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat:不是数字

使用普通的 agm 标记我没有任何错误，但我需要使用自定义标记来显示它的信息

我用'almacenes'的边界和获取和数组对我的数据库进行查询

我的功能

doSomething2(e) {
fetch(`${this.conexion}/api/instalaciones/bounds/${e.ka.h}/${e.ka.g}/${e.oa.h}/${e.oa.g}`)
  .then(response => {
    return response.json()
  }).then(respuesta => {
    console.log(respuesta)
    this.almacenes=respuesta.content
  })
}

map.component.html

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
    <agm-overlay *ngFor="let almacen of almacenes;let i=index" [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
        <agm-info-window>Info Window {{i}}</agm-info-window>
    </agm-overlay>
</agm-map>

我收到错误 invalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number 并且 agm-info-window 不起作用

4

1 回答 1

0

agm-info-window 不是 agm-map 的子项，而是一个独立的指令。

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
    <agm-overlay *ngFor="let almacen of almacenes;let i=index" [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
    </agm-overlay>
    <agm-info-window *ngFor="let almacen of almacenes;let i=index">Info Window {{i}}</agm-info-window>
</agm-map>

由于 info window 和 overlay 共享相同的基本数组，因此做两个单独ngFor的 s 效率不高，因此我们可以将它们与联合ng-container父级连接起来：

<agm-map [zoom]="12" [latitude]="lat" [longitude]="lng" (boundsChange)="doSomething2($event)">
  <ng-container *ngFor="let almacen of almacenes;let i=index" >
    <agm-overlay [latitude]="almacen.latitudInstalacion"
        [longitude]="almacen.longitudInstalacion">
        <div class="block">
            <strong style="color:white;">{{almacen.idInstalacion}}</strong>
        </div>
    </agm-overlay>
    <agm-info-window>Info Window {{i}}</agm-info-window>
  </ng-container>
</agm-map>
于 2019-11-06T10:20:36.040 回答