Angular-google-maps: * ngFor |でsebm-google-map-markerをロードしません非同期

上記の問題に関する更新をお願いしますか？

ちょっと@ krunal039-非同期操作が終了した後、 <sebm-google-map-marker>がDOMにあるかどうかを確認できますか？ ありがとう！

こんにちはセバスチャン、私はちょうど私のangular2を最新に更新しました、そしてそれが私の悪いコードかangularの何かであるかどうかわからない問題を解決しました。 しかし、それは修正されました。 すべてのマーカーに基づいてズーム自動を設定するオプションもありますか？

@ krunal039いいえ、

@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は、各オブジェクトが緯度と経度のパラメータを持つオブジェクトの配列です。 centersは、サービスを介して非同期にロードされます。 テンプレート内の中心で*ngForを使用する他のhtml要素は正しく機能しています。 各中心オブジェクトのマーカーは、正しい緯度と経度でDOMに作成されますが、何らかの理由でマップに表示されません。

私はangular.rc4を使用して同じ問題に直面しています。
さらに、ブラウザのサイズを手動で変更すると、マップが表示されます。

@ SebastionMrc4でも同じ問題が発生しています。 マーカーが地図に表示されていません。 マーカーはDOMに表示されていますが

ここで同じ問題。 解決策はありますか？

ここでも同じ問題。 角度rc3で

最後にそれを理解します。
私のシナリオでは、JSONで提供されていたHttpServiceからデータを取得していました。 そのデータのlatフィールドとlngフィールドをforループにバインドしていました。 それは機能していませんでした。 マーカーはDOMで作成されていましたが、キャンバスに表示されていませんでした。

これは私がそれを理解した方法です：

1. マーカーという名前のインターフェースを作成しました：
   インターフェイスマーカー{
   lat：番号;
   lng：番号;
   ラベル？：文字列;
   ドラッグ可能：ブール値;
   }
2. データが監視可能になり、サブスクライブメソッドで、データが完全にフェッチされたときに他のメソッドpushMarker（）を呼び出します。

this.observable = this.gisDataService.getEntities（dcode）;
this.observable.subscribe（
data => this.data = data.map（（entity：Entity）=> new 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. 次に、データをループしてマーカー配列にプッシュしました。

this.data.forEach（element => {
this.markers.push（{
lat：Number （element.lat）、
lng：Number （element.lng）、
label：element.tag、
ドラッグ可能：false
}）
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>

いいね！

プライベート関数の代わりに、パイプを作成してみませんか？
これを行う。 見た目も携帯性も格段に良くなります。

また、それほど多くの作業はありません。

必要に応じて例を示します:-)

午前2時12分に2017年4月1日、オースティンラルーの[email protected]は書きました：

私はちょうどこれに遭遇し、万が一に備えて私の回避策を共有すると思いました
他の誰かがそれに遭遇します。

tsファイルに、文字列を数値に変換する簡単なメソッドを追加しました。

プライベートconvertStringToNumber（値：文字列）：数値{
+ valueを返します。
}

次に、htmlでlat / longをこのメソッドに渡します。

[latitude] = "convertStringToNumber（location.latitude）" [longitude] = "
convertStringToNumber（location.longitude） ">

—
このスレッドにサブスクライブしているため、これを受け取っています。
このメールに直接返信し、GitHubで表示してください
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 、
またはスレッドをミュートします
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
。

この問題を見つける前に、1時間以上これに対して頭を殴っていました。 これは私にとって完璧に機能しました:)

一般に、私の経験では、agmマーカーが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 ：