Angular-google-maps: Tidak memuat sebm-google-map-marker dengan * ngFor | asinkron

tolong ada pembaruan tentang masalah di atas?

hey @ krunal039 - dapatkah Anda memeriksa apakah <sebm-google-map-marker> ada di DOM setelah operasi asinkron selesai? Terima kasih!

Hai Sebastian, saya baru saja memperbarui angular2 saya ke yang terbaru dan itu telah menyelesaikan masalah tidak yakin itu adalah kode buruk saya atau sesuatu dengan sudut. tapi sudah diperbaiki. apakah ada juga opsi untuk mengatur zoom otomatis berdasarkan semua penanda?

@ krunal039 tidak, saat ini tidak memungkinkan - maaf. tolong buka terbitan baru untuk ini jika Anda membutuhkannya. jadi kita bisa membahas detail api. Terima kasih!

@Sebastian
Saya ingin membuka kembali masalah ini. Saya menggunakan angular2 rc.4 (rilis angular2 terbaru sejauh ini) dan menghadapi masalah ini. Penanda dimuat ke DOM tetapi tidak muncul di kanvas peta.

  <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 adalah larik Objek yang memiliki parameter garis lintang dan garis bujur. centers dimuat secara asinkron melalui layanan. Elemen html lain yang menggunakan *ngFor dengan bagian tengah pada template bekerja dengan benar. Penanda untuk setiap objek tengah dibuat di DOM dengan garis lintang dan bujur yang benar tetapi karena beberapa alasan tidak muncul di peta.

Saya menghadapi masalah yang sama menggunakan angular.rc4.
Selain itu, jika saya mengubah ukuran browser secara manual, peta akan ditampilkan kepada saya.

@SebastionM Saya mengalami masalah yang sama di rc4. Penanda tidak muncul di peta. Spidolnya terlihat di dom

masalah yang sama di sini. ada solusi?

masalah yang sama di sini juga. pada rc3 sudut

Akhirnya cari tahu.
Dalam skenario saya, saya mendapatkan data dari Layanan Http yang datang di JSON. Saya mengikat bidang lat dan lng data itu di for loop. Itu tidak berhasil. Penanda sedang dibuat di DOM tetapi tidak ditampilkan di kanvas.

Beginilah cara saya mengetahuinya:

1. Membuat Antarmuka bernama penanda:
   penanda antarmuka {
   lat: angka;
   lng: nomor;
   label ?: string;
   draggable: boolean;
   }
2. Ketika data saya dapat diamati kemudian pada metode berlangganan, saya memanggil metode lain pushMarker () ketika data sepenuhnya diambil:

this.observable = this.gisDataService.getEntities (dcode);
this.observable.subscribe (
data => this.data = data.map ((entity: Entity) => Entitas baru (entity.uid, entity.alpha, entity.lat, entity.lng, entity.type, entity.tag, entity.addr, entity .desc, entity.zcode, entity.rcode, entity.dcode)),
error => peringatan (error),
() => this.pushMarkers () // ini adalah tempat saya memanggil fungsi saat selesai
);

1. Kemudian saya mengulang data saya dan mendorongnya ke dalam array penanda:

this.data.forEach (element => {
this.markers.push ({
lat: Angka (element.lat),
lng: Nomor (element.lng),
label: element.tag,
draggable: false
})
console.log ("didorong" + element.lat + "," + element.lng);
});

Catatan: Saya menemukan bahwa ketika data diterima di JSON itu tidak akan dikonversi ke angka bahkan jika Anda memetakan JSON ke kelas (seperti yang saya lakukan). Tetapi pada saat fungsi Pushing (dalam pushMarker () Anda harus secara eksplisit mengonversi lat / lng ke Number ().

Semoga membantu.

@nileshmahant Super! Saya perlu secara eksplisit mengonversi ke Number (). Terima kasih :)

Terima kasih @nileshmahant menyelesaikan masalah saya!

Saya ingin membuka kembali yang ini, untuk mendapatkan konversi dalam komponen, daripada harus memberinya nilai yang dikonversi

+1 bagi saya, butuh beberapa saat untuk memikirkan hal ini dan kasus penggunaan untuk memuat penanda dari JSON cukup logis

Saya baru saja mengalami ini dan berpikir saya akan membagikan pekerjaan saya jika ada orang lain yang mengalaminya.

Di file ts saya, saya menambahkan metode sederhana untuk mengonversi string menjadi angka:

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

Kemudian di html saya hanya meneruskan garis lintang / bujur ke metode ini:

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

Bagus!

Bolehkah saya menyarankan alih-alih fungsi pribadi, mengapa tidak membuat pipa ke
melakukan hal ini. Ini akan terlihat jauh lebih bagus dan portabel.

Juga tidak lebih banyak pekerjaan.

Saya dapat memberikan contoh jika Anda menginginkannya :-)

Pada 1 April 2017 pukul 02:12, Austin LaRue [email protected] menulis:

Saya baru saja mengalami ini dan berpikir saya akan membagikan pekerjaan saya untuk berjaga-jaga
ada orang lain yang mengalaminya.

Di file ts saya, saya menambahkan metode sederhana untuk mengonversi string menjadi angka:

convertStringToNumber pribadi (nilai: string): angka {
kembali + nilai;
}

Kemudian di html saya hanya meneruskan garis lintang / bujur ke metode ini:

[latitude] = "convertStringToNumber (location.latitude)" [longitude] = "
convertStringToNumber (location.longitude) ">

-
Anda menerima ini karena Anda berlangganan utas ini.
Balas email ini secara langsung, lihat di GitHub
https://github.com/SebastianM/angular2-google-maps/issues/330#issuecomment-290757110 ,
atau nonaktifkan utasnya
https://github.com/notifications/unsubscribe-auth/AY4FmON0vwkqtvbC3qlBK1E6SQQQsAr2ks5rrSXggaJpZM4IaCkp
.

Wow, saya memukuli kepala saya terhadap ini selama lebih dari satu jam sebelum saya menemukan masalah ini. Ini bekerja dengan sempurna untuk saya :)

Secara umum, pengalaman saya adalah bahwa jika agm-markers terlihat di DOM tetapi tidak ditampilkan, Anda mungkin memberikan tipe objek yang salah ke ngFor dalam beberapa cara (baik tipe yang tidak tepat seperti tipe Number yang disebutkan di atas atau sesuatu yang tidak mengandung lat dan long sama sekali yang mana adalah kasus saya). Periksa kembali apa yang Anda kirim ke array penanda.

Saya ingin membuka kembali masalah ini.
Saya mencoba untuk menampilkan penanda yang telah ditentukan sebelumnya, serta menghasilkan penanda di layar jika pengguna mengklik suatu titik di peta, tetapi dengan menggunakan ngfor, penanda tersebut tidak ditampilkan di peta.
Di file HTML saya, saya punya

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

dan untuk menambah dan menampilkan penanda di file service.ts saya, saya punya

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

Saya juga sedang menyimpan nilai lat dan long sebagai objek string jadi saya harus menggunakan objek bawaan DecimalPipe seperti ini:

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

Dokumen Resmi: https://angular.io/api/common/DecimalPipe