Angular-google-maps: 不使用* ngFor加载sebm-google-map-marker | 异步的

请就上述问题进行任何更新？

嘿@ krunal039-异步操作完成后，您可以检查<sebm-google-map-marker>是否在DOM中吗？ 谢谢！

嗨，塞巴斯蒂安，我刚刚将我的angular2更新到了最新版本，它已经解决了不确定的问题，不确定这是我的错误代码还是有关angular的问题。 但它是固定的。 是否还有基于所有标记设置自动缩放的选项？

@ krunal039否，暂时无法执行-抱歉。 如果需要，请为此打开一个新问题。 因此我们可以讨论api的详细信息。 谢谢！

@SebastianM
我想重新打开这个问题。 我正在使用angular2 rc.4 （到目前为止最新的angular2版本）并遇到了这个问题。 标记正在加载到DOM，但不会显示在地图画布上。

  <sebm-google-map 
      [latitude]="map_focus_lat"
      [longitude]="map_focus_lng"
      [zoom]="11">

    <sebm-google-map-marker *ngFor="let center of centers" 
    [latitude]="center.latitude" 
    [longitude]="center.longitude">
    </sebm-google-map-marker>
  </sebm-google-map>

centers是一个Objects数组，每个对象都有纬度和经度参数。 centers通过服务异步加载。 使用*ngFor和模板中的中心的其他html元素可以正常工作。 每个中心对象的标记都是在DOM中以正确的纬度和经度创建的，但是由于某些原因，它们没有显示在地图上。

我使用angular.rc4面临着同样的问题。
此外，如果我手动调整浏览器的大小，地图将显示给我。

@SebastionM我在rc4上遇到同样的问题。 标记未显示在地图上。 标记虽然显示在dom上

同样的问题在这里。 有什么解决方案吗？

这里也是同样的问题。 在角rc3上

终于弄清楚了。
在我的场景中，我从JSON传入的Http Service获取数据。 我在for循环中绑定了该数据的lat和lng字段。 它没有工作。 标记是在DOM中创建的，但未显示在画布上。

这就是我想出的方式：

1. 创建了一个名为marker的接口：
   界面标记{
   lat：数字；
   lng：数字；
   标签？：字符串；
   Draggable：布尔值；
   }
2. 当我的数据变为可观察的时，然后在subscription方法中，当数据完全被获取时，我调用另一个方法pushMarker（）：

this.observable = this.gisDataService.getEntities（dcode）;
this.observable.subscribe（
数据=> this.data = data.map（（entity：Entity）=>新的Entity（entity.uid，entity.alpha，entity.lat，entity.lng，entity.type，entity.tag，entity.addr，entity .desc，entity.zcode，entity.rcode，entity.dcode）），
错误=>警报（错误），
（）=> this.pushMarkers（）//这是我在完成时调用函数的地方
）;

1. 然后，我循环输入数据并将其推入markers数组：

this.data.forEach（element => {
this.markers.push（{
lat：Number （element.lat），
lng：Number （element.lng），
标签：element.tag，
可拖动：假
}）
console.log（“ pushed” + element.lat +“，” + element.lng）;
}）;

注意：我发现，即使您将JSON映射到类，当以JSON接收数据时，它也不会转换为数字。 但是在推送（在pushMarker（）函数中时，您必须将lat / lng显式转换为Number（）。

希望能帮助到你。

@nileshmahant超级！ 我需要显式转换为Number（）。 谢谢 ：）

谢谢@nileshmahant解决了我的问题！

我想重新打开它，以在组件中进行转换，而不必将转换后的值提供给它

对我来说+1，花了我一段时间才解决，从JSON加载标记的用例很合乎逻辑

我刚遇到这个问题，并认为我会与他人分享我的工作，以防其他任何人遇到它。

在我的ts文件中，我添加了一个简单的方法来将字符串转换为数字：

private convertStringToNumber(value: string): number {
        return +value;
    }

然后在html中，我将lat / long传递给此方法：

<sebm-google-map-marker *ngFor="let location of clientLocations" [latitude]="convertStringToNumber(location.latitude)" [longitude]="convertStringToNumber(location.longitude)"></sebm-google-map-marker>

好的！

我可以建议，为什么不创建私有函数，而不是创建私有函数？
做这个。 它看起来会更好看并且便于携带。

也没有太多的工作。

我可以提供一个示例，如果您想要一个:-)

2017年4月1日，02：12，Austin LaRue [email protected]写道：

我刚遇到这个问题，以为我可以分享我的工作，以防万一
其他任何人都遇到了。

在我的ts文件中，我添加了一个简单的方法来将字符串转换为数字：

私人convertStringToNumber（值：字符串）：数字{
返回+值;
}

然后在html中，我将lat / long传递给此方法：

[latitude] =“ convertStringToNumber（location.latitude）” [经度] =“
convertStringToNumber（location.longitude）“>

-
您收到此消息是因为您已订阅此线程。
直接回复此电子邮件，在GitHub上查看
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ，
或使线程静音
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
。

哇，在发现此问题之前，我一直在对此打头一个多小时。 这对我来说非常有效：)

通常，我的经验是，如果agm-markers在DOM中可见但未显示，则您可能以某种方式向ngFor提供了错误的对象类型（要么是上述类型为Number类型的不正确类型，要么根本不包含lat和long是我的情况）。 仔细检查您要发送到标记数组的内容。

我想再次打开这个问题。
我正在尝试显示预定义的标记，并在用户单击地图上的某个点时在屏幕上生成标记，但是使用ngfor时，标记未显示在地图上。
在我的HTML文件中，我有

<sebm-google-map
          [latitude]="lat"
          [longitude]="lng"
          [zoom]="zoom"
          [disableDefaultUI]= false
          [zoomControl]= true
          (mapClick)="mapClicked($event)">

          <sebm-google-map-marker
            *ngFor="let m of markers; let i = index"
            (markerClick)="clickedMarker(m,i)"
            [latitude]="convertStringToNumber(m.lat)"
            [longitude]="convertStringToNumber(m.lng)"
            [markerDraggable]="m.draggable"
            (dragEnd)="markerDragEnd(m, $event)"
          >

            <sebm-google-map-info-window>
              <strong>{{m.name}}</strong>
            </sebm-google-map-info-window>
          </sebm-google-map-marker>
        </sebm-google-map>

并在我的service.ts文件中添加并显示标记，

  getMarkers(){
    var markers = JSON.parse(localStorage.getItem('markers'));
    return markers;
  }

  addMarker(newMarker){
    //fetch marker that are already there
    var markers = JSON.parse(localStorage.getItem('markers'));

    // Push to array
    markers.push(newMarker);

    //set markers again
    localStorage.setItem('markers',JSON.stringify(markers))
  }

我也将lat和long值另存为string对象，因此必须使用内置的DecimalPipe这样的对象：

... *ngFor="let pin of pins" [latitude]="pin.lat|number:'1.0-8'" ...

官方文件： https ：