Angular-google-maps: لا يتم تحميل sebm-google-map-marker بـ * ngFor | غير متزامن

من فضلك أي تحديث على القضية أعلاه؟

hey @ krunal039 - هل يمكنك التحقق مما إذا كان <sebm-google-map-marker> موجودًا في DOM بعد انتهاء العملية غير المتزامنة؟ شكرا!

مرحبًا سيباستيان ، لقد قمت للتو بتحديث angular2 الخاص بي إلى الأحدث وقد تم حل مشكلة لست متأكدًا من أنه رمز سيئ أو شيء ذي زاوية. لكنها ثابتة. هل هناك أيضًا خيارات لتعيين التكبير / التصغير التلقائي بناءً على جميع العلامات؟

@ krunal039 لا ، غير ممكن الآن - آسف. الرجاء فتح مشكلة جديدة لهذا إذا كنت بحاجة إلى هذا. حتى نتمكن من مناقشة تفاصيل API. شكرا!

تضمين التغريدة
أود إعادة فتح هذه المشكلة. أنا أستخدم 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 بشكل غير متزامن عبر إحدى الخدمات. عناصر html الأخرى التي تستخدم *ngFor مع مراكز في القالب تعمل بشكل صحيح. يتم إنشاء علامات كل كائن مركزي في DOM مع خط الطول والعرض الصحيحين ولكن لسبب ما لا تظهر على الخريطة.

أواجه نفس المشكلة باستخدام angular.rc4.
بالإضافة إلى ذلك ، إذا قمت بتغيير حجم المتصفح يدويًا ، فستظهر الخريطة لي.

SebastionM أواجه نفس المشكلة في rc4. العلامات لا تظهر على الخريطة. العلامات تظهر على دوم بالرغم من ذلك

نفس المشكلة هنا. اي حلول؟

نفس المشكلة هنا أيضًا. على الزاوي rc3

اكتشفها في النهاية.
في السيناريو الخاص بي ، كنت أحصل على بيانات من خدمة Http التي كانت قادمة في JSON. كنت أربط حقلي العرض و lng لتلك البيانات في حلقة for. لم يكن يعمل. تم إنشاء العلامات في DOM ولكن لم يتم عرضها في لوحة الرسم.

هكذا فهمت ذلك:

1. إنشاء واجهة باسم علامة:
   محدد الواجهة {
   خط الطول: رقم ؛
   lng: رقم ؛
   التسمية ؟: سلسلة ؛
   قابل للسحب: منطقي ؛
   }
2. عندما تصبح بياناتي قابلة للملاحظة ثم في طريقة الاشتراك ، أستدعي طريقة أخرى pushMarker () عندما يتم جلب البيانات بالكامل:

this.observable = this.gisDataService.getEntities (dcode) ؛
this.observable.subscribe (
data => this.data = data.map ((الكيان: الكيان) => الكيان الجديد (الكيان. uid ، الكيان. Alpha ، الكيان.لات ، الكيان. lng ، الكيان.تيبي ، الكيان. الوسم ، الكيان.addr ، الكيان .desc ، الكيان.zcode ، الكيان ، الكيان ، الكيان. كود)) ،
خطأ => تنبيه (خطأ) ،
() => this.pushMarkers () // هذا هو المكان الذي أستدعى فيه الوظيفة عند الانتهاء
) ؛

1. ثم قمت بحلقات في بياناتي ودفعتها إلى مصفوفة العلامات:

this.data.forEach (element => {
this.markers.push ({
خط الطول: الرقم (element.lat) ،
lng: الرقم (element.lng) ،
التسمية: element.tag ،
السحب: خطأ
})
console.log ("pushed" + element.lat + "،" + element.lng) ؛
}) ؛

ملاحظة: لقد اكتشفت أنه عند تلقي البيانات في JSON لا يتم تحويلها إلى رقم حتى إذا قمت بتعيين JSON إلى فصل دراسي (كما فعلت أنا). ولكن في وقت الضغط (في وظيفة pushMarker () ، يجب عليك تحويل خطوط الطول / العرض إلى الرقم () بشكل صريح.

آمل أن يساعد.

nileshmahant سوبر! كنت بحاجة للتحويل صراحةً إلى Number (). شكرا لك :)

شكرا nileshmahant حل مشكلتي!

أود إعادة فتح هذا ، للحصول على التحويل في المكون ، بدلاً من الاضطرار إلى إطعامه بالقيمة المحولة

إجراء +1 بالنسبة لي ، استغرق مني بعض الوقت لمعرفة ذلك وحالة استخدام علامات التحميل من JSON منطقية جدًا

لقد واجهت هذا للتو واعتقدت أنني سأشارك عملي في حال واجهه أي شخص آخر.

أضفت في ملف ts طريقة بسيطة لتحويل سلسلة إلى رقم:

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

ثم في html ، مررت فقط في خط الطول / العرض إلى هذه الطريقة:

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

لطيف!

هل لي أن أقترح أنه بدلاً من الوظيفة الخاصة ، لماذا لا تنشئ أنبوبًا لـ
افعل هذا. سيبدو أجمل بكثير وقابل للحمل.

أيضا ليس الكثير من العمل.

يمكنني تقديم مثال إذا كنت تريد واحدًا :-)

في 1 أبريل 2017 الساعة 02:12 ، كتب Austin LaRue [email protected] :

لقد واجهت هذا للتو واعتقدت أنني سأشارك عملي في حالة
أي شخص آخر يصطدم بها.

أضفت في ملف ts طريقة بسيطة لتحويل سلسلة إلى رقم:

private convertStringToNumber (value: string): number {
العائد + القيمة ؛
}

ثم في html ، مررت فقط في خط الطول / العرض إلى هذه الطريقة:

[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 مرئية في DOM ولكن لم يتم عرضها ، فمن المحتمل أنك قدمت نوع كائن خاطئ إلى ngFor بطريقة ما (إما نوع غير مناسب كنوع رقم مذكور أعلاه أو شيء لا يحتوي على خطوط عرض وطويلة على الإطلاق كانت حالتي). تحقق مرة أخرى مما ترسله إلى مجموعة العلامات.

أود إعادة فتح هذه المشكلة مرة أخرى.
أحاول عرض علامات محددة مسبقًا ، بالإضافة إلى إنشاء علامات على الشاشة إذا نقر المستخدم على نقطة على الخريطة ، ولكن باستخدام 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://angular.io/api/common/DecimalPipe