Angular-google-maps: كيفية استخدام علامة الكتلة؟

لا آسف ، ليس لدي نصيحة يمكنني أن أقدمها لك الآن

SebastianM أعتقد أنه يمكن القيام بذلك من خلال الوصول إلى كائن الخريطة ، انظر هنا من فضلك: https://github.com/SebastianM/angular2-google-maps/pull/311

هل فعل أي شخص هذا بالفعل؟ لا يبدو أن ملفات markerclusterer js تعجب كائن الخريطة الذي مررته من .getMap ()

AbdulTheProgrammer كنت أنتظر هذا للدخول ، أملي الأكبر هو أن ينجح؟ أنت متأكد من أنك اتصلت بـ getMap () على نفس مثيل خدمة GoggleMapsAPIWrapper كالذي يستخدمه توجيه الخريطة ، وهذه أكبر مشكلة لدي في الوقت الحالي ...

لقد حققت ذلك باستخدام مكون مخصص وإدراجه داخل sebm-google-map ؛ يستخدم GoogleMapsAPIWrapper والخريطة الأصلية.

أقوم بإضافة العلامات يدويًا باستخدام خرائط جوجل جافا سكريبت api (window.google.maps) ثم إنشاء MarkerClusterer.

اتمني ان يكون مفيدا.

ricardojbertolin هذا يساعد ، مثلما أشار سيباستيان هنا # 311 ، المكون المخصص داخل الخريطة هو بالضبط كيفية الوصول إلى كائن الخريطة الأصلي ، على الرغم من أنه من المؤكد أنه يجب أن تكون هناك طريقة أفضل لإضافة العلامات باستخدام خدمة المدير مثل يعارضون القيام بذلك يدويًا عبر js api ...

أنا أيضًا أعاني من أجل الحصول على عمل js-marker-clusterer. أحصل على مرجع إلى نسخة الخرائط الأصلية ، ولكني أحتاج أيضًا إلى مراجع لعلامات الخريطة الأصلية. هل لدى أي شخص أي أفكار حول كيفية الحصول على محددات الخريطة الأصلية لـ <sebm-google-map-marker> s؟

تضمين التغريدة
هل لديك مثال للمكون المخصص و GoogleMapsApiWrapper؟
يبدو أنني لا أفهم ما يعنيه "وضع مكون مخصص داخل المكون".

@ siegerx3 يبدو الأمر أبسط ، أنشئ أولاً مكونًا أو توجيهًا مخصصًا:

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';

@Directive({
  selector: 'custom-directive'
})
export class CustomMapDirective {
  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    this.gmapsApi.getNativeMap().then(map => {
      // map is the native google map object and the wrapper is the same instance as the one on the map
    });
  }
}

لقد استخدمت توجيهًا لأنني لست بحاجة إلى قالب ، يمكنك استخدام مكون وتحديد واحد إذا كنت تريد.

يذهب دون أن تقول أنك بحاجة إلى تحديد المكون / التوجيه المخصص الخاص بك في قسم directives للمكون الذي تستخدمه فيه. الآن فقط قم بإسقاط المكون الخاص بك داخل الخريطة:

<sebm-google-map>
  <!-- markers, info windows, etc -->

  <custom-directive></custom-directive>
</sebm-google-map>

نظرًا للطريقة التي يعمل بها Angular2 DI ، نظرًا لأننا لا نحدد مزودًا لخدمة GoogleMapsAPIWrapper ، فسوف يرتفع في شجرة المكونات حتى يعثر على واحد. في هذه الحالة ، تكون خطوة واحدة للأعلى ونستخدم GoogleMapsAPIWrapper الذي تم توفيره في المكون sebm-google-map

jfmaeck هناك طريقة getNativeMarker() على خدمة MarkerManager يمكنك استخدامها لذلك ، ويمكنك الحصول على نفس مثيل خدمة مدير العلامات باستخدام الطريقة الموضحة أعلاه للغلاف.

تضمين التغريدة
رؤية الكود ، الشرح منطقي الآن! شكرا :)

alexweber شكرًا جزيلاً لك على getNativeMarker() للطريقة MarkerManager تتوقع مثيل SebmGoogleMapMarker (مكون العلامة) كمعامل لها. هل تعرف كيف يمكنني الحصول على هذا المكون في متغير لتمريره إلى دالة getNativeMarker؟

تضمين التغريدة لا يمكنني التحقق لأكون متأكدًا بنسبة 100٪ في الوقت الحالي ، ولكن ربما يمكنك فقط استخدام @ViewChild('myMarker'): SebmGoogleMapMarker في المكون الخاص بك والإشارة إليه باستخدام # في الترميز: <sebm-google-map-marker #myMarker> فقط تذكر أن ViewChild تحل بشكل صحيح فقط في ngAfterViewInit .

alexweber أشكرك مرة أخرى على مساعدتك. لسوء الحظ ، لم أتمكن من الوصول إلى العلامات باستخدامViewChildren. قمت بتقسيم العرض التوضيحي على Plunkr وقمت ببعض التغييرات عليه حتى يتم تسجيل نتيجة ViewChildren في وحدة التحكم (مصفوفة فارغة في الوقت الحالي):

markers after view init []

http://plnkr.co/edit/7rdOz3QswDL0pik7SmAS؟p=preview

أعتقد أنك مشغول جدًا ولكن إذا كان لديك فرصة للنظر في الأمر ، فسأقدر ذلك حقًا.

jfmaeck عندما تستخدم ContentChildren (لأنك تريد الحصول على المثيلات التي تعيش داخل عنصر المكون الخاص بك) ، فإنها تعمل: http://plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp؟p=preview

jfmaeck لقد كنت قريبًا ، @ViewChildren : http://plnkr.co/edit/rJMCFoX9GokturcJljLh؟p=preview

لجعله يعمل باستخدام مكوّن الخريطة المخصص @ContentChildren (مثل المشار إليه

شكرا جزيلا لك SebastianM وalexweber!

alexweberSebastianM بادئ ذي بدء ، كيف يمكنني تضمين هذه المكتبة التي تستخدم فيها js-marker-clusterer؟ هل هناك طريقة لاستخدام المجموعات على مستوى التكبير / التصغير المحدد؟ وكيف أقوم بتضمين الصور للمجموعات مثل هذا: http://i65.tinypic.com/10gxkcw.png

ricardojbertolin هل هناك فرصة

alexweber ، هل اختبرت إضافة markerclusterer.js؟ أي مثال متعلق؟

jpcode آسف لا ، لم أعمل على هذا منذ فترة ...

لدي حل عملي في أحد مشاريعي.
إذا لزم الأمر ، يمكنني وضع مخطط مع مثال؟
تضمين التغريدة
تضمين التغريدة

@ siegerx3 لطيف ، سوف يساعد كثيرا.
أنا أعمل كبديل فقط باستخدام خرائط جوجل api + markerclusterer.js.

@ siegerx3 ، هذا مثال أساسي فقط باستخدام خرائط Google lib:
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

POC معلق:
في طريقة استخدام خرائط google-angular2 ، أعتقد أنه يجب إضافتها بالداخل لمنع الاصطدام بالأشياء العالمية مثل "google".
الحل البديل سيمنع تحميل google من lib.
قم بتوفير (MapsAPILoader، {useClass: NoOpMapsAPILoader}) وقم بتحميله بنفسك وإضافة clusterer.js.

ولكن من الأفضل أن تضيف خرائط google-angular2 توجيهًا لدعم العنقود :)

تضمين التغريدة
لقد أمضيت ساعات في محاولة جعلها تعمل في كباس ... دون أي نجاح.
دائما حصلت على بعض الأخطاء التي لا علاقة لها بالموضوع.
لذا سأريكم الكود هنا ...

import { Directive, OnDestroy, OnInit } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
import { AppService } from '../../../services/index';
import { Observable } from 'rxjs';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'custom-map'
})
export class CustomMapDirective implements OnInit, OnDestroy {

  private map: GoogleMap;

  constructor(private gmapsApi: GoogleMapsAPIWrapper, private appService: AppService) {
  }

  ngOnInit() {

    this.gmapsApi.getNativeMap().then(map => {
      this.map = map;

      let shopMarker = {
        url: "assets/img/marker_shop.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }
      let loungeMarker = {
        url: "assets/img/marker_lounge.svg", // url
        scaledSize: new google.maps.Size(50, 50)
      }

      let markers = [];

      let style = {
        url: "/assets/img/marker.svg",
        height: 50,
        width: 50,
        anchor: [-14, 0],
        textColor: '#bd0b1d',
        textSize: 11,
        backgroundPosition: "center center"
      };

      var options = {
        imagePath: "/assets/img/marker",
        gridSize: 70,
        styles: [style, style, style]
      };

      Observable
        .interval(500)
        .skipWhile((s) => this.appService.Shops == null || this.appService.Shops.length <= 0)
        .take(1)
        .subscribe(() => {
          for (let shop of this.appService.Shops) {
            var marker = new google.maps.Marker({
              position: new google.maps.LatLng(shop.Latitude, shop.Longitude),
              icon: shop.Lounge ? loungeMarker : shopMarker
            });
            google.maps.event.addListener(marker, 'click', () => {
              this.appService.SelectedShop = shop;
            });
            markers.push(marker);

          }

          var markerCluster = new MarkerClusterer(map, markers, options);
          }
        })
    });
  }
}

لقد وضعت هذا التوجيه في علامة angular2-google-maps:

<sebm-google-map>
      <custom-map></custom-map>
</sebm-google-map>

@ siegerx3 ، لقد صنعت POC باستخدام خرائط google-angular2

مقاربة:

• أضف خرائط جوجل من index.html
• استيراد clusterer.js
• منع تحميل خرائط جوجل lib من خرائط جوجل الزاويّة (باستخدام المزود)
• أضف توجيهًا للحصول على مثيل الخريطة الأصلية من lib
• استخدم متغيرات google / markercluster لاستخدامها كمتغيرات عالمية

يمكنك أيضًا استخدام التوجيهات الأخرى من angular-2-google-maps ، ولكن أعتقد أنه من الأفضل إضافة شيء ما إلى lib لدعم العنقود.
->

لأنه ليس من المنطقي استخدام هذا lib لرسم خريطة وبعد ذلك فقط استخدم خرائط Google ، في هذه الحالة أعتقد أنه من الأفضل استخدام خرائط Google فقط libs + Clusterer.js كما قبل يظهر plunkr.

import { Directive } from '@angular/core';
import { GoogleMapsAPIWrapper } from 'angular2-google-maps/core';
import { GoogleMap, Marker } from 'angular2-google-maps/core/services/google-maps-types';
// npm install js-marker-clusterer --save
import 'js-marker-clusterer/src/markerclusterer.js';

declare const google;
declare const MarkerClusterer;

@Directive({
  selector: 'googlemap-directive'
})



export class GoogleMapDirective {

  googleMarkers : any;
  _map: any;

  zoom: number = 3;
  lat: number = 51.673858;
  lng: number = 7.815982;

  markers: marker[] = [
      {
          lat: 51.673858,
          lng: 7.815982
      },
      {
          lat: 51.373858,
          lng: 7.215982
      },
      {
          lat: 51.723858,
          lng: 7.895982
      }
  ]

   initMarkers(){
    let i = 0;
    let markers = this.markers;
    var result = [];
    for ( ; i < markers.length; ++i ){
       result.push( new google.maps.Marker({
            position : markers[ i ] 
        })
       );
    }
    return result;
  }



  constructor (private gmapsApi: GoogleMapsAPIWrapper) {
    var me = this;
    this.gmapsApi.getNativeMap().then(map => {
      // instance of the map.
      me._map = map;
      me.initializeMap();
    });
  }

  initializeMap(){
      var me = this;
      me.googleMarkers = me.initMarkers();
      var mc = new MarkerClusterer( me._map, me.googleMarkers, { imagePath: 'https://googlemaps.github.io/js-marker-clusterer/images/m' } );
  }

}

interface marker {
    lat: number;
    lng: number;
}

في طريقة منع تحميل خرائط جوجل مرتين استخدم موفر من angular2-google-maps
في تعريف المكون الخاص بك إضافة موفر

import {OnInit, Component  } from '@angular/core';

import { SebmGoogleMap, MapsAPILoader, NoOpMapsAPILoader  } from 'angular2-google-maps/core';

@Component({
    selector: 'site-map',
    templateUrl: './site-map.component.html',
    styleUrls: ['./site-map.component.css'],
  providers: [
    {
      provide: MapsAPILoader, useClass: NoOpMapsAPILoader
    }
  ],
})

في تعريف القالب الخاص بك تحتاج إلى إضافة التوجيه.

<sebm-google-map #sitemap
  [disableDefaultUI]="false"
  [zoom] = "zoom"
  [zoomControl]="true" 
  [latitude]="lat" [longitude]="lng">
  <!--
  <sebm-google-map-marker 
      *ngFor="let m of markers; let i = index"
      (markerClick)="openDetail(m)"
      [latitude]="m.lat"
      [longitude]="m.lng"
      [label]="m.label"

      [markerDraggable]="m.draggable"
      [iconUrl]="'assets/img/marker.png'"
      (dragEnd)="markerDragEnd(m, $event)">

    <sebm-google-map-info-window [disableAutoPan]="true" (infoWindowClose)="onCloseDetail.emit()">
      <h5>{{m.address}}</h5>
      <div>{{m.city}}, {{m.state}}, {{m.country}}</div>
    </sebm-google-map-info-window>    
  </sebm-google-map-marker>
  -->
  <googlemap-directive></googlemap-directive>
</sebm-google-map>

تضمين التغريدة
أوافق على أنه يجب إضافة هذا إلى مكتبة الخرائط angular2-google ، على الرغم من أنه في الحل الخاص بي ، لا يتم تحميل الخرائط sdk مرتين ، تمامًا كما ذكرت.

أنا فقط أترك agm lib يفعل بقدر ما يستطيع وأقوم فقط بالأجزاء الضرورية بنفسي.

يارب احفظها
هل يمكنك مشاركة مثال عملي في ملف مضغوط؟

هههههههههههه
سأقوم بإنشاء واحدة غدًا إذا كان هذا كافيًا لك :)
هل أنت معتاد على الزاوي CLI؟ وإلا سأفعل واحدًا أساسيًا.

يارب احفظها
نعم ، قليلاً ... كنت قادرًا على تنفيذ التجميع باستخدام خرائط Google api + marker clusterer. أفضل استخدام خرائط google-angular2 بدلاً من ذلك ... من أجل الحصول على عرض كامل للحل.
tnx كثيرًا لمساعدتك

هههههههههههه
https://drive.google.com/open؟id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc

فقط npm install و ng serve . إذا لم يكن لديك angular-cli مثبتًا npm install angular-cli -g أولاً.

تذكر أن هذا ليس هو الحل الأمثل. إنه مجرد حل بديل قمت بإنشائه لأنه لا يوجد توجيه للكتلة حتى الآن.

تعديل:
قد يكون التنسيق غريبًا لأن ذري لم يكن يعمل ، لذلك كنت أستخدم المحرر القديم الجيد ^ ^

يارب احفظها
شكر كثيرا. سوف أتحقق من هذا الحل :)

هل هناك أي تحديث حول هذا المضمّن في خرائط Google الزاويّة 2؟ أحتاج حقًا إلى استخدامه لمشروع أعمل عليه

تضمين التغريدة
لا يزال بإمكانك استخدام أحد الأمثلة التي قدمها الأشخاص بمن فيهم أنا :)
إذا كان ذلك كافيا لك بالطبع

هههههههههههه
راجع للشغل كل شيء يعمل؟ هل ساعدتك؟

يارب احفظها
نعم ، لقد ساعدني كثيرًا. Tnx!

يارب احفظها

لقد استخدمت مثالك بنفسي ، وحصلت عليه بشكل رائع ، لذلك مجد!

لكن مشكلتي الآن هي أنه لا يمكنني تحديث العلامات. لقد استخدمت ngOnChanges لتمرير مجموعة محدثة من النقاط ، ويمكنني رؤية المصفوفة تتغير ، ولكن عندما تصبح المصفوفة فارغة ، لا تتم إزالة العلامات.

أي نصائح؟

تضمين التغريدة
عظيم أنه ساعد!

في الواقع ، واجهت نفس المشكلة / مشكلة مماثلة منذ بضعة أيام ولكن لم يكن لدي الوقت الكافي لإيجاد حل.

سوف أنشر هنا عندما وجدت شيئًا ما بعد ذلك.

لقد وجدت حلاً لمشكلة المجموعات المستمرة.

        .interval(100)
        .take(1)
        .subscribe(() => {
        if(this.markerCluster) {
          this.markerCluster.clearMarkers();
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);

        });

لقد أعلنت markerCluster خارج Observable ، ثم إذا كانت موجودة في البداية ، فإنها تقوم بتشغيل وظيفة تسمى clearMarkers () والتي ستزيل أي علامات موجودة من الخريطة ، على الرغم من أنها تتركها في المصفوفة (ومن هنا المنطق الآخر لتفريغ المصفوفة ).

لقد أدى ذلك إلى حل مشكلتي ، ربما سيساعدك أيضًا

تضمين التغريدة

سوف أتحقق من ذلك عندما أعمل على هذا الجزء مرة أخرى ، شكرًا :)

مرحبا شباب ، شكرا على هذه التلميحات
تمكنت من الحصول على getNativeMap باستخدام مكون فرعي
أنا أقوم بتنفيذ قائمة سياق الخريطة
<sebm-google-map> <mapmenu-component></mapmenu-component>
المشكلة في حالتي هي أن قالب المكون الفرعي غير مرئي
يتم تحويله إلى لغة تأشير النص الفائق
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
وهو مكون غير مرئي

هل يمكنني وضع بعض HTML داخل خريطة sebm-google من حيث المبدأ؟
أود الحصول عليها بصيغة html ، وليس باستخدام OverlayView

تمكنت من التعامل معها عن طريق فصل الوظيفة إلى مكونين (توجيه + مكون)
1.) يجب أن يكون داخل sebm-google-map ويعمل كملحق لواجهة برمجة التطبيقات
2.) واحد يجب أن يكون خارج sebm-google-map (لأنه بخلاف ذلك لا أرى html الذي تم إنشاؤه)

أهلا بالفريق،
@ siegerx3 لقد استخدمت الكود الخاص بك من https://drive.google.com/open؟id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc
إنه يعمل بشكل رائع ، لكني غير قادر على الاندماجو. ما أحاول تحقيقه هو دمج نافذة المجموعة + علامة العلامة + نافذة المعلومات. لذلك ، عند النقر فوق الكتلة ، يجب أن يكون لدى الأفراد ملصق علامة وعند النقر عليها يجب أن تنبثق نافذة معلومات. أي فكرة كيف يمكنني الحصول على هذا العمل SebastianM

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

تضمين التغريدة

أنا في الواقع أعمل على نفس الشيء بنفسي. اضطررت إلى التبديل إلى MarkerClustererPlus للمكتبة ، وأنا أستخدم الكود التالي لتمكين نوافذ المعلومات للعلامات الفردية بالإضافة إلى المجموعات نفسها:

        .interval(100)
        .take(1)
        .subscribe(() => {
        if (this.markerCluster) {
          this.markerCluster.clearMarkers();
          this.markers = [];
        }
          if (this.points.length > 0) {
            for (let point of this.points) {
              let marker = new google.maps.Marker({
                position: new google.maps.LatLng(point.Latitude, point.Longitude),
                icon : markerIcon,
                title: 'this is a title'
              });
              marker.addListener('mouseover', function() {
                infowindow.open(map, marker);
              });
              marker.addListener('mouseout', function() {
                infowindow.close(map, marker);
              });
              this.markers.push(marker);
            }
          } else {
            this.markers = [];
            if (this.markerCluster) {
              this.markerCluster.clearMarkers();
            }
          }
          this.markerCluster = new MarkerClusterer(map, this.markers, options);
          google.maps.event.addListener(this.markerCluster, 'mouseover', function(cluster) {
            let content = 'Cluster Window';
            let info = new google.maps.MVCObject;
            let clusterInfowindow = new google.maps.InfoWindow();

            clusterInfowindow.setContent(content);
            clusterInfowindow.open(map, info);
            clusterInfowindow.setPosition(cluster.getCenter());
            google.maps.event.addListener(map, 'zoom_changed', function() { clusterInfowindow.close(); });
          });

        });

المشكلة الوحيدة هي معرفة كيفية إغلاق نوافذ المجموعة - يتم إغلاقها عند مغادرة الخريطة ولكن ليس عند مغادرة المجموعة.

هل يعرف أي شخص ما إذا كان بإمكاننا استخدام الإحداثيات في الزاوية 2 ولكن باستخدام خطوط الطول والعرض كما هو مشار إليه هنا " https://developers.google.com/maps/documentation/javascript/reference#DirectionsWaypoint "؟

naranmistry هل يمكنك تحديد ما تريد القيام به قليلاً؟

لا أرى بالضبط ما هي خطتك. ربما شخص آخر يفهم؟

في الأساس ، أريد أن أكون قادرًا على وضع قيم lng و lat في إحداثية بدلاً من سلسلة ، فهل هذا ممكن باستخدام angular2-google-maps؟ لأنني أريد أن أعرض مسارًا به عدة نقاط توقف محددة باستخدام قيم خطوط الطول والشبكة

إذا فهمت بشكل صحيح ، فأنا لا أرى رابط هذه الوحدة ، ولكن بشكل عام ، إذا نظرت إلى الوثائق ، فستجد location Type: string|LatLng|Place . لذا ، نعم ، يمكنك استخدام كائن LatLng لخرائط Google الذي يأخذ القيم الرقمية في مُنشئه.

هل هذا ما تحتاجه؟

في الأساس ، أريد أن أعرف كيف ، حيث حاولت تمريرها كما تقول الوثائق ، لكنها استمرت بالفشل. هل هناك مثال عملي للإحداثيات باستخدام خطوط الطول والعرض؟

آسف للارتباك كان يجب أن أكون أكثر وضوحا

لا أعتقد ذلك. ولكن إذا كان بإمكانك تقديم الكود الخاص بك كمثال؟ كما هو الحال في plunkr ، يمكنني رؤية ما يمكنني العثور عليه :)

حسنًا ، سأحاول وضع واحدة معًا

شكرا

عذرًا ، هل يمكنني اعتراض _click event_ في _infowindow_ داخل توجيه _marker-الكتلة_ أو عرض مكون _sebm-google-map-info_ لكل محددات؟

شكرا لك!

لدي نفس المشكلة fsciuti.
هل وجدت حل ؟

نظرًا لأن agm-maps لا يزال لا يدعم المجموعات ، فقد أخذت مثال @ siegerx3 ، والتحسين في تغييرات العلامة ومثال نوافذ معلومات العلامة لـ nanomoffet. عمل جيد! شكرا ، الأمثلة الخاصة بك ساعدت كثيرا.

لرد شيء ما ، أقدم نسخة محدثة من مثال

https://drive.google.com/open؟id=0B51AX67ezltoOFdSNTQ1NlQ4SU0

تم إجراء التغييرات التالية:

• تبعيات محدثة لتلائم Angular 4.1 و @agm/core
• كود محدث ليناسب Angular 4.1 و @agm/core
• إضافة الكشف عن تغيير العلامة
• إضافة مثال على نافذة معلومات العلامة
• نمط رمز ثابت

andorfermichael شكرًا

تضمين التغريدة

لا تحتاج إلى مكون بدلاً من ذلك ، فقط استخدم وحدات ES6.

أنشئ ملفًا جديدًا وقم بتصدير التكوين ، على سبيل المثال:

_google- maps.config.ts_

export const markerIcon = {
  url: '/assets/marker.png', // url
  scaledSize: new google.maps.Size(35, 35)
};

const style = {
  url: '/assets/cluster.png',
  height: 40,
  width: 40,
  textColor: '#FFF',
  textSize: 11,
  backgroundPosition: 'center center'
};

export const options = {
  imagePath: '/assets/cluster',
  gridSize: 70,
  styles: [style, style, style]
};

ثم في _marker-cluster.ts_ قم باستيراد تلك المتغيرات / الوحدات النمطية:

import { markerIcon, options } from './google-maps.config';

تضمين التغريدة
بالطبع يمكنني المضي قدمًا واستخدام الرموز المعقدة وكل ما تم توثيقه في أحدث إصدار من وحدة خرائط Google Javascript ، أليس كذلك؟

picosam أعتقد ذلك ولكن لم أحاول ذلك بعد

andorfermichael هذه وظيفة رائعة 👍
لكني أواجه مشكلة صغيرة

أحتاج إلى إعادة التوجيه إلى مسار آخر عن طريق نقرة على نافذة المعلومات ، ولكن لا يحتوي infowindow على حدث نقرة. لذلك استخدمت بدلاً من ذلك حدث "closeclick" ، ها هو الرمز

infowindow.addListener('closeclick', function () { this.router.navigate(['/blabla', id]); });

كل شيء يعمل بشكل جيد ولكن عندما أنقر على زر إغلاق نافذة المعلومات ، يتم استدعاء الحدث ولكنه يتسبب في حدوث خطأ
this.router is undefined

_بالطبع يتم استيراد مكتبة جهاز التوجيه ويتم تعريف جهاز التوجيه في المُنشئ_

لقد جربت أسلوبًا آخر ، استخدمت أداة ضبط الأحداث (تقنية الإدخال / الإخراج) بين المكون الرئيسي والتوجيه.
لقد حددت @Output() eventEmitter = new EventEmitter() في الأعلى كمتغير فئة ،
والحدث في نفس المكان ،

infowindow.addListener('closeclick', function () { this.eventEmitter(id); });

يعمل كل شيء بشكل جيد أيضًا ، ولكن عندما أنقر على زر إغلاق نافذة المعلومات ، يتم استدعاء الحدث ولكنه يتسبب في حدوث خطأ
this.eventEmitter is undefined

هل هناك طريقة لإصلاح هذه المشكلة؟

@ hossam-maurice أفترض أن الخطأ ناتج عن this . this في حالتك هو العنصر الذي أطلق الحدث - نافذة المعلومات. لهذا السبب ، تم تقديم وظائف الأسهم في ES6 / ECMAScript2015. باستخدام وظائف السهم ، لا يعتمد this على كيفية استدعاء الوظيفة ولكن على النطاق المحيط بها.
لذلك يجب أن يعمل infowindow.addListener('closeclick', () => { this.eventEmitter(id); }); أجلك.

لمزيد من المراجع ، ألق نظرة على: ExploringJS - Arrow Functions و MDN - Arrow Functions

andorfermichael شكرا جزيلا لك ، لقد نجحت: D 👍

مرحبًا ، لقد استخدمت مجموعة العلامات المخصصة من google drive وهي تعمل بشكل جيد.
الآن لدي مشكلة واحدة ، أحتاج إلى النقر فوق علامة وفتح مشروط تمهيد التشغيل. لكنني لا أعرف حقًا كيف يمكنني القيام بذلك. حاولت استخدام مستمع حدث عند النقر وإظهار تنبيه وهو يعمل ، لكنني لا أعرف حقًا كيفية تشغيل نموذج تمهيد التشغيل. أيه أفكار؟

شكرا :)

مرحبًا ، لقد أضفت زرًا داخل نافذة المعلومات ولكني غير قادر على مشاهدة حدث النقر ، هل لديك أي فكرة عن كيفية القيام بذلك؟

تضمين التغريدة
مرحبا شكرا لك على الحل. هل يمكنك المساعدة أيضًا في تغيير ألوان المجموعة وفقًا للعلامات الموجودة بداخلها. مثل الأحمر والأصفر والأزرق.
أطيب التحيات

@ vugar005 لا أفهم بالضبط ما تعنيه بتغيير اللون. يمكنك ببساطة تغيير صورة الكتلة وفقًا لاحتياجاتك. بقدر ما أعرف ، توفر مكتبة مجموعة علامات Google خمس صور مختلفة تسمى m1 إلى m5 (m = افتراضي) والتي يتم استخدامها مع تزايد عدد العلامات لكل مجموعة. لا أعرف العتبات الدقيقة. مزيد من المعلومات في Google Developers MapsDocumentation . لذلك ، أقترح إنشاء خمس صور بألوان مختلفة وتسميتها من المجموعة 1 إلى المجموعة 5 ووضعها داخل مجلد الأصول.

AlexisNi ، يمكنك محاولة الاستماع إلى حدث domready على infoWindow الذي يتم تشغيله عند

google.maps.event.addListener(infoWindow, 'domready', function() {
  document.getElementById('info-window-button').addEventListener('click', function(){
    // run code here
  });
});

joaolbaptista آسف ، ولكن سؤالك حول Bootstrap على الرغم من دمجه مع علامات خرائط Google هو خارج الموضوع في رأيي. أود أن أقترح طرح نفس السؤال (أكثر تفصيلاً قليلاً) في stackoverflow ؛)

andorfermichael لقد قصدت في الواقع تغيير الرمز وفقًا لعدد العلامات داخل الكتلة. لهذا السبب تحولت إلى واجهة برمجة تطبيقات الويب من google. نأمل أن توفر الخرائط الزاوية خدمة الكتلة في المستقبل.
شكرا لك على أي حال

@ vugar005 هذا ما حاولت شرحه. حتى واجهة برمجة تطبيقات خرائط Google الأصلية توفر فقط إمكانية خمس صور مختلفة. يتم عرض كل صورة من هذه الصور عند الوصول إلى حد معين ، على سبيل المثال ، الكتلة 1 (م 1) 0-10 ، المجموعة 2 (م 2) 11 - 100 وما إلى ذلك.

مرحبًا andorfermichael ، قد يكون لديك أي فكرة عن سبب ظهور هذا الخطأ فجأة بعد ترقية الحزم:

ReferenceError: MarkerClusterer is not defined
    at SafeSubscriber._next (marker-clusterer.ts:106)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.__tryOrUnsub (Subscriber.js:238)
    at SafeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.SafeSubscriber.next (Subscriber.js:185)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber._next (Subscriber.js:125)
    at Subscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/operator/skipWhile.js.SkipWhileSubscriber._next (skipWhile.js:52)
    at SkipWhileSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/operator/take.js.TakeSubscriber._next (take.js:80)
    at TakeSubscriber.webpackJsonp.../../../../rxjs/Subscriber.js.Subscriber.next (Subscriber.js:89)
    at AsyncAction.webpackJsonp.../../../../rxjs/observable/IntervalObservable.js.IntervalObservable.dispatch (IntervalObservable.js:70)

تضمين التغريدة كان لدي هذه المشكلة من قبل. تكمن المشكلة في أنك لم تقم باستيراد ملف masterclusterer js أو أن الكود يستخدم Masterclusterer قبل استيراد ملف masterclusterer js.

شكرًا جزيلاً @ vugar005 - الشيء هو أنني لم أتطرق إلى هذا الرمز منذ فترة طويلة! تم تضمين الملف .js في .angular-cli.json وصحيح أنني لا أملك كشف حساب import * as ... في ملف .ts . بالطبع عندما حاولت إضافة عبارة import يدويًا حصلت على خطأ مفاده أن ملحقات .js غير مسموح بها!

picosam اهلا وسهلا بكم. سعيد لأنه ساعدك.

هذه الميزة متاحة عبر الحزمة الجديدة @ agm / js-marker-clusterer (# 1044)

SebastianM شكرًا لإتاحة هذه الميزة في خرائط Google الزاوية. أحاول الحصول على حدث نقرة للعمل عند النقر فوق الكتلة ، يبدو أنه غير متوفر حاليًا. أي حل بديل لنفسه؟

andorfermichael مثالك يبدو رائعا! شكرا لتقديم هذا المثال. في مثالك ، أحاول تضمين واجهة برمجة تطبيقات خرائط Google من خلال صفحة الفهرس ولكني أستمر في الوقوع في أخطاء مثل عدم العثور على google أو عدم العثور على مجموعة العلامات وما إلى ذلك. أية أفكار؟

jpcode hi شكرًا على الحل الذي