InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number agm-core agm-overlay答案

【问题标题】：InvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number agm-core agm-overlayInvalidValueError: setPosition: not a LatLng or LatLngLiteral: in property lat: not a number agm-core agm-overlay
【发布时间】：2020-01-30 04:46:46
【问题描述】：

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

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

我使用 '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 不起作用

【问题讨论】：

您能否提供一个最小的可重现示例，例如stackblitz 以便我们可以从我们这边重现这个问题？如果您硬编码有效的纬度/经度坐标（例如文档示例中的坐标），您是否仍然会遇到相同的错误？您自己的 lat/lng 值是数字类型吗？

标签： angular typescript google-maps agm-core

【解决方案1】：

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>

由于信息窗口和覆盖共享相同的基本数组，做两个单独的ngFors 效率不高，因此我们可以将它们与一个联合的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>

【讨论】：