Angular-google-maps: Bagaimana cara menggunakan Marker Clusterer?

tidak maaf, saya tidak punya saran yang bisa saya berikan kepada Anda sekarang

@SebastianM Saya rasa itu bisa dilakukan dengan akses ke objek peta, silakan lihat di sini: https://github.com/SebastianM/angular2-google-maps/pull/311

Apakah ada yang benar-benar melakukan ini? file js markerclusterer sepertinya tidak menyukai objek peta yang saya berikan dari .getMap ()

@AbdulTheProgrammer Saya sudah menunggu ini untuk masuk, harapan terbesar saya adalah itu akan berhasil? Anda yakin Anda memanggil getMap () pada contoh yang sama dari layanan GoggleMapsAPIWrapper seperti yang digunakan oleh petunjuk peta, itulah masalah terbesar saya saat ini ....

Saya telah mencapainya dengan menggunakan komponen kustom dan memasukkannya ke dalam sebm-google-map; ini menggunakan GoogleMapsAPIWrapper dan nativeMap.

Saya menambahkan penanda secara manual menggunakan api javascript google maps (window.google.maps) dan kemudian membuat MarkerClusterer.

Saya harap ini membantu.

@ricardojbertolin Itu benar-benar membantu, seperti yang Sebastian tunjukkan di sini # 311, komponen khusus di dalam peta adalah cara yang tepat untuk mendapatkan akses ke objek peta asli, meskipun pasti ada cara yang lebih baik untuk menambahkan penanda menggunakan layanan manajer sebagai menentang melakukannya secara manual melalui js api ...

Saya juga kesulitan untuk membuat js-marker-clusterer berfungsi. Saya mendapatkan referensi ke contoh peta asli, namun saya juga memerlukan referensi ke penanda peta asli. Adakah yang tahu bagaimana caranya mendapatkan penanda peta asli untuk <sebm-google-map-marker> s saya?

@alexeber
Apakah Anda memiliki contoh untuk komponen khusus dan GoogleMapsApiWrapper?
Saya sepertinya tidak mengerti apa artinya "menempatkan komponen kustom di dalam komponen".

@ siegerx3 Kedengarannya lebih sederhana, pertama-tama buat komponen kustom atau direktif:

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

Saya menggunakan direktif karena saya tidak memerlukan templat, Anda dapat menggunakan komponen dan menentukannya jika Anda mau.

Bisa dikatakan Anda perlu menentukan komponen / arahan kustom Anda di bagian directives dari komponen tempat Anda menggunakannya. Sekarang letakkan saja komponen Anda di dalam peta:

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

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

Karena cara kerja Angular2 DI, karena kami tidak menentukan penyedia untuk layanan GoogleMapsAPIWrapper, ia akan naik ke pohon komponen hingga menemukannya. Dalam kasus ini, ini 1 langkah ke atas dan kami menggunakan GoogleMapsAPIWrApper yang disediakan di komponen sebm-google-map

@jfmaeck Ada metode getNativeMarker() pada layanan MarkerManager yang dapat Anda gunakan untuk itu, dan Anda bisa mendapatkan contoh layanan pengelola penanda yang sama menggunakan metode yang dijelaskan di atas untuk pembungkusnya.

@alexeber
Melihat kodenya, penjelasannya masuk akal sekarang! Terima kasih :)

@alexweber terima kasih banyak atas petunjuk Anda tentang cara mendapatkan instance marker asli. Saya masih memiliki satu pertanyaan, meskipun: metode getNativeMarker() dari MarkerManager mengharapkan instance SebmGoogleMapMarker (komponen penanda) sebagai parameternya. Apakah Anda tahu bagaimana saya dapat mengambil komponen ini dalam variabel untuk meneruskannya ke fungsi getNativeMarker?

@jfmaeck Tidak masalah! Saya tidak dapat memastikan 100% yakin saat ini tetapi Anda mungkin dapat menggunakan @ViewChild('myMarker'): SebmGoogleMapMarker di komponen Anda dan mereferensikannya dengan # di markup: <sebm-google-map-marker #myMarker> just ingat ViewChild hanya menyelesaikan dengan benar di ngAfterViewInit .

@alexweber terima kasih lagi atas bantuan Anda. Sayangnya, saya tidak dapat mengakses penanda menggunakan @ViewChildren. Saya bercabang demo di Plunkr dan membuat beberapa perubahan sehingga hasil ViewChildren masuk ke konsol (array kosong saat ini):

markers after view init []

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

Saya kira Anda cukup sibuk tetapi jika Anda memiliki kesempatan untuk melihatnya, saya akan sangat menghargainya.

@jfmaeck saat Anda menggunakan @ContentChildren (karena Anda ingin mendapatkan instance yang hidup di dalam elemen komponen Anda), ini berfungsi: http://plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp?p=preview

@jfmaeck Anda sudah dekat, ini garpu kerja dari plunk Anda dengan @ViewChildren : http://plnkr.co/edit/rJMCFoX9GokturcJljLh?p=preview

Untuk membuatnya berfungsi menggunakan komponen peta khusus @ContentChildren (seperti yang ditunjukkan @SebastianM ) akan berfungsi tetapi saya berasumsi Anda hanya membuatnya untuk mendapatkan akses ke penanda dan tidak terlalu perlu memiliki komponen tambahan itu di tempat pertama.

Terima kasih banyak @SebastianM dan @alexweber!

@alexweber @SebastianM Pertama-tama, bagaimana cara menyertakan pustaka yang Anda gunakan js-marker-clusterer ini? Apakah ada cara untuk menggunakan cluster pada tingkat zoom tertentu? Dan bagaimana cara menyertakan gambar untuk cluster seperti ini: http://i65.tinypic.com/10gxkcw.png

@ricardojbertolin adakah kesempatan untuk membagikan kode Anda? Saya sangat baru di angular2 (telah bekerja dengan angularjs selama satu tahun +) dan saya agak bingung.

@alexweber , Apakah Anda menguji menambahkan markerclusterer.js? ada contoh terkait?

@jpcode maaf tidak, sudah lama tidak mengerjakan ini ...

Saya memiliki solusi yang berfungsi di salah satu proyek saya.
Jika perlu, saya dapat menyusun plunkr dengan sebuah contoh?
@jp
@alexeber

@ siegerx3 bagus, akan banyak membantu.
Saya bekerja di alternatif hanya menggunakan api google maps + markerclusterer.js.

@ siegerx3 , ini adalah contoh dasar hanya menggunakan google maps lib:
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

POC menunggu keputusan:
Dalam cara menggunakan angular2-google-maps, saya rasa perlu ditambahkan di dalamnya untuk mencegah tabrakan dengan objek global seperti "google".
Sebuah solusi akan mencegah memuat google dari lib.
sediakan (MapsAPILoader, {useClass: NoOpMapsAPILoader}) dan muat sendiri serta tambahkan clusterer.js.

Tetapi lebih baik jika angular2-google-maps menambahkan arahan untuk mendukung clusterer :)

@jp
Saya menghabiskan waktu berjam-jam mencoba membuatnya bekerja di plunker ... namun tidak berhasil.
Selalu mendapat beberapa kesalahan yang tidak terkait dengan masalah tersebut.
Jadi saya hanya akan menunjukkan kodenya di sini ...

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

Anda memasukkan arahan ini ke dalam tag angular2-google-maps:

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

@ siegerx3 , saya membuat POC menggunakan angular2-google-maps

Pendekatan:

• Tambahkan peta google dari index.html
• import clusterer.js
• cegah memuat google maps lib dari angular2-google-maps (menggunakan provider)
• Tambahkan arahan untuk mendapatkan contoh peta orignal dari lib
• gunakan variabel google / markercluster untuk digunakan sebagai global

Anda juga dapat menggunakan arahan lain dari angular-2-google-maps, tetapi saya pikir lebih baik jika ada sesuatu yang ditambahkan ke lib untuk mendukung clusterer.
->

karena tidak masuk akal untuk menggunakan lib ini untuk melukis peta dan selanjutnya hanya menggunakan peta google, dalam hal ini saya pikir lebih baik menggunakan google maps libs + clusterer.js sebagai sebelum acara 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;
}

Untuk mencegah memuat peta google dua kali menggunakan penyedia dari angular2-google-maps
dalam definisi komponen Anda, tambahkan penyedia

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

Dalam definisi template Anda, Anda perlu menambahkan direktif.

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

@jp
Saya setuju bahwa ini harus ditambahkan ke pustaka angular2-google-maps, meskipun dalam solusi saya sdk peta tidak dimuat dua kali, seperti yang Anda sebutkan.

Saya hanya membiarkan agm lib melakukan sebanyak mungkin dan hanya melakukan bagian yang diperlukan sendiri.

@septianjoko_
bisakah Anda membagikan contoh yang berfungsi dalam file zip?

@bayu_joo
Saya akan membuatnya besok jika itu cukup untuk Anda :)
Apakah Anda terbiasa dengan angular-cli? Kalau tidak, saya hanya akan melakukan yang dasar.

@septianjoko_
ya, sedikit ... saya bisa mengeksekusi clusterisasi menggunakan google maps api + marker clusterer. saya lebih suka menggunakan, sebagai gantinya, angular2-google-maps ... untuk memiliki pandangan lengkap tentang solusinya.
terima kasih banyak atas bantuan Anda

@bayu_joo
https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc

Hanya npm install dan ng serve . Jika Anda belum menginstal angular-cli npm install angular-cli -g terlebih dahulu.

Ingat, ini bukan solusi optimal. Ini hanya solusi yang saya buat karena belum ada arahan cluster.

edit:
pemformatan mungkin aneh karena atom saya tidak berfungsi, jadi saya menggunakan editor lama yang baik ^^

@septianjoko_
Terima kasih banyak. saya akan memeriksa solusi ini :)

Apakah ada pembaruan tentang ini yang dimasukkan ke dalam peta google sudut 2? Saya benar-benar perlu menggunakannya untuk proyek yang sedang saya kerjakan

@Tokopedia
Anda masih dapat menggunakan salah satu contoh yang telah disediakan oleh orang-orang termasuk saya :)
Jika itu cukup bagi Anda tentunya

@bayu_joo
Btw melakukan semuanya bekerja? Apakah itu membantu Anda?

@septianjoko_
Ya, itu sangat membantu saya. Tnx!

@septianjoko_

Saya menggunakan contoh Anda sendiri, dan berhasil dengan baik, jadi pujian!

Tapi masalah saya sekarang adalah saya tidak bisa mendapatkan penanda untuk diperbarui. Saya menggunakan ngOnChanges untuk meneruskan array poin yang diperbarui, dan saya dapat melihat array berubah, tetapi ketika array menjadi kosong, penanda tidak dihapus.

Ada tips?

@nanomoffet
Bagus itu membantu!

Sebenarnya saya mengalami masalah yang sama / serupa beberapa hari yang lalu tetapi saya belum punya waktu untuk menemukan solusi.

Saya akan posting di sini ketika saya menemukan sesuatu.

Saya menemukan solusi untuk masalah cluster yang persisten.

        .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);

        });

Saya mendeklarasikan markerCluster di luar Observable, dan kemudian jika ada di awal menjalankan fungsi yang disebut clearMarkers () yang akan menghapus penanda yang ada dari peta, meskipun meninggalkannya dalam array (karenanya logika lain untuk mengosongkan array ).

Itu memperbaiki masalah saya, mungkin itu akan membantu Anda juga @ siegerx3

@nanomoffet

Saya akan memeriksanya ketika saya mengerjakan bagian itu lagi, terima kasih :)

hai teman-teman, terima kasih atas petunjuk ini
saya berhasil mendapatkan getNativeMap dengan menggunakan subkomponen
saya menerapkan menu konteks peta
<sebm-google-map> <mapmenu-component></mapmenu-component>
masalah dalam kasus saya adalah template subkomponen tidak terlihat
itu dirender ke dalam html menjadi
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
yang merupakan komponen tak terlihat

pada prinsipnya apakah saya dapat menempatkan beberapa html di dalam sebm-google-map?
saya ingin menjadikannya sebagai html, tidak menggunakan OverlayView

saya bisa mengatasinya dengan memisahkan fungsionalitas menjadi 2 komponen (direktif + komponen)
1.) yang harus berada di dalam sebm-google-map dan berfungsi sebagai aksesor api
2.) salah satu yang harus berada di luar sebm-google-map (karena jika tidak saya tidak melihat html yang dihasilkan)

Hai tim,
@ siegerx3 Saya menggunakan kode Anda dari https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc
itu berfungsi dengan baik, tetapi saya tidak dapat mengintegrasikandan. Apa yang saya coba capai adalah, mengintegrasikan cluster + label penanda + jendela info. Jadi, ketika saya mengklik cluster, individu harus memiliki label penanda dan pada klik di atasnya akan muncul jendela info. Tahu bagaimana saya bisa membuat @SebastianM ini berfungsi

@rachmawati_rachmawati.rrrrrrrrrrrrrrrrrrrrrrrrr?
Saya pikir karena cluster belum diimplementasikan dalam modul dan Anda tidak menggunakan penanda dari modul, Anda harus menggunakan api peta asli dalam komponen kustom yang sama yang digunakan untuk clustering.
Artinya, menambahkan label dan jendela info secara manual seperti yang Anda lakukan di vanilla javascript.

@rachmawati_rachmawati.rrrrrrrrrrrrrrrrrrrrrrrrr?

Saya sebenarnya sedang mengerjakan hal yang sama ini sendiri. Saya harus beralih ke MarkerClustererPlus untuk perpustakaan, dan saya menggunakan kode berikut untuk mengaktifkan jendela info untuk penanda individu serta cluster itu sendiri:

        .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(); });
          });

        });

Satu-satunya masalah adalah mencari tahu cara menutup jendela cluster - mereka menutup saat Anda meninggalkan peta tetapi tidak saat Anda meninggalkan cluster.

Adakah yang tahu apakah kita dapat menggunakan waypoint dalam sudut 2 tetapi menggunakan lat dan lng seperti yang dirujuk di sini " https://developers.google.com/maps/documentation/javascript/reference#DirectionsWaypoint "?

@naranmistry Dapatkah Anda menentukan sedikit apa yang ingin Anda lakukan?

saya tidak melihat apa sebenarnya rencanamu. Mungkin orang lain mengerti?

Pada dasarnya saya ingin dapat menempatkan nilai lng dan lat ke titik lewat alih-alih string, apakah ini mungkin menggunakan angular2-google-maps? Karena saya ingin menampilkan rute dengan beberapa perhentian spesifik menggunakan nilai garis bujur dan garis lintang

Jika saya mengerti dengan benar, maka saya tidak melihat connectino ke modul ini, tetapi secara umum, jika Anda melihat dokumentasi, tertulis location Type: string|LatLng|Place . Jadi ya, Anda dapat menggunakan objek LatLng google maps yang mengambil nilai numerik dalam konstruktornya.

Itukah yang Anda butuhkan?

Pada dasarnya saya ingin tahu caranya, ketika saya mencoba meneruskannya seperti yang dikatakan dalam dokumentasi tetapi terus gagal. Apakah ada contoh titik jalan yang berfungsi menggunakan lat dan lng?

Maaf atas kebingungan saya seharusnya lebih jelas

Saya rasa tidak. Tetapi apakah Anda dapat memberikan kode Anda sebagai contoh? Seperti di plunkr, saya bisa melihat apa yang bisa saya temukan :)

Oke saya akan mencoba dan menggabungkannya

Terima kasih

Maaf, dapatkah saya mencegat _click event_ dalam _infowindow_ di dalam _marker-cluster_ direktif atau membuat ulang komponen _sebm-google-map-info_ untuk setiap penanda?

Terima kasih!

Saya memiliki masalah yang sama @fsciuti.
apakah kamu menemukan solusinya?

Karena agm-maps masih belum mendukung cluster, saya mengambil contoh @ siegerx3 , perbaikan pada perubahan penanda dan contoh jendela info penanda dari @nanomoffet. Kerja bagus! Terima kasih, teladan Anda banyak membantu.

Untuk memberikan sesuatu kembali, saya memberikan versi terbaru dari contoh @ siegerx3 di bawah tautan berikut:

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

Perubahan berikut telah dilakukan:

• dependensi yang diperbarui agar sesuai dengan Angular 4.1 dan @agm/core
• kode yang diperbarui agar sesuai dengan Angular 4.1 dan @agm/core
• menambahkan deteksi perubahan penanda
• menambahkan contoh jendela info penanda
• gaya kode tetap

@andorfermichael Terima kasih banyak, Anda hebat! Satu pertanyaan silahkan: jika saya ingin mengeksternalisasi gaya direktif (baik penanda dan cluster), bagaimana saya harus melakukannya? Saya berpikir untuk membuatnya menjadi komponen, tetapi kemudian saya tidak tahu cara memberi makan Observable dengan benar dengan opsi dan gaya yang Anda miliki ...

@picosam

Anda tidak memerlukan komponen, cukup gunakan modul ES6.

Buat file baru dan ekspor konfigurasi, misalnya:

_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]
};

dan kemudian di _marker-cluster.ts_ impor variabel / modul tersebut:

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

@andorferichael danke noch mal !!!
Tentu saja saya dapat melanjutkan dan menggunakan ikon yang kompleks dan semua yang didokumentasikan dalam versi modul Javascript Google Maps terbaru, benar?

@ picosam Saya kira begitu tetapi belum mencobanya

@andorfermichael Ini adalah pekerjaan yang luar biasa 👍
tapi saya menghadapi sedikit masalah

Saya perlu mengalihkan ke rute lain dengan sekali klik di jendela infow, tapi infowindow tidak memiliki event klik. Jadi saya menggunakan acara "closeclick", ini kodenya

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

Semuanya berfungsi dengan baik tetapi ketika saya mengklik tombol tutup jendela infow, acara dipanggil tetapi itu membuat kesalahan
this.router is undefined

_Tentu saja perpustakaan router diimpor dan router ditentukan dalam konstruktor_

Saya mencoba teknik lain, saya menggunakan eventemitter (teknik Input / Output) antara komponen induk dan direktif.
Saya mendefinisikan @Output() eventEmitter = new EventEmitter() di bagian atas sebagai variabel kelas,
Dan acara di tempat yang sama,

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

Juga semuanya berfungsi dengan baik tetapi ketika saya mengklik tombol tutup jendela infow, acara dipanggil tetapi itu membuat kesalahan
this.eventEmitter is undefined

Adakah cara untuk memperbaiki masalah ini?

@ hossam-maurice Saya menganggap bahwa kesalahan disebabkan oleh this . this dalam kasus Anda adalah elemen yang memicu kejadian - jendela infow. Oleh karena itu, fungsi panah telah diperkenalkan di ES6 / ECMAScript2015. Menggunakan fungsi panah, this tidak bergantung pada bagaimana fungsi dipanggil tetapi pada lingkup sekitarnya.
Jadi infowindow.addListener('closeclick', () => { this.eventEmitter(id); }); seharusnya bekerja untuk Anda.

Untuk referensi lebih lanjut, lihat: ExploringJS - Fungsi Panah dan MDN - Fungsi Panah

@andorfermichael Terima kasih banyak, berhasil: D 👍

Halo, saya menggunakan cluster penanda khusus dari google drive dan berfungsi dengan baik.
Sekarang saya punya satu masalah, saya perlu mengklik penanda dan membuka modal bootstrap. Tetapi saya tidak benar-benar tahu bagaimana saya bisa melakukan ini. Saya mencoba menggunakan event listener di klik dan menampilkan peringatan dan berhasil, tetapi saya tidak benar-benar tahu cara memunculkan modal bootstrap. Ada ide?

Terima kasih :)

Halo, saya menambahkan tombol di dalam jendela info tetapi saya tidak dapat menangkap peristiwa klik. Apakah Anda tahu cara melakukannya?

@tokopedia
Hai, terima kasih atas solusinya. Bisakah Anda juga membantu mengubah warna cluster sesuai dengan penanda di dalamnya. Seperti warna merah, kuning dan biru.
Salam

@ vugar005 Saya tidak mengerti persis apa yang Anda maksud dengan mengubah warna. Anda cukup mengubah gambar cluster sesuai kebutuhan Anda. Sejauh yang saya tahu, pustaka cluster marker Google menyediakan lima gambar berbeda bernama m1 hingga m5 (m = default) yang digunakan seiring bertambahnya jumlah marker per cluster. Saya tidak tahu persis ambang batasnya. Informasi selengkapnya di Google Developers MapsDocumentation . Jadi, saya akan menyarankan untuk membuat lima gambar dengan warna berbeda dan menamainya cluster1 ke cluster5 dan menempatkannya di dalam folder assets.

@AlexisNi Anda dapat mencoba untuk mendengarkan acara domready di infoWindow yang dipicu ketika

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

@joaolbaptista maaf, tapi pertanyaan anda tentang Bootstrap meskipun digabungkan dengan marker Google Maps menurut saya tidak sesuai topik. Saya akan menyarankan untuk mengajukan pertanyaan yang sama (sedikit lebih rinci) di stackoverflow ;)

@andorfermichael Saya sebenarnya bermaksud mengubah ikon sesuai dengan jumlah penanda di dalam cluster. Jadi itulah mengapa saya beralih ke api web google asli. Semoga peta bersudut akan memberikan layanan cluster di masa depan.
terima kasih

@ vugar005 Itulah yang saya coba jelaskan. Bahkan api google maps asli hanya memberikan kemungkinan untuk lima gambar yang berbeda. Masing-masing gambar ini ditampilkan ketika ambang tertentu tercapai, misalnya, cluster1 (m1) 0 - 10, cluster2 (m2) 11 - 100, dan seterusnya.

Halo @andorfermichael , mungkin Anda tahu mengapa setelah memutakhirkan paket saya tiba-tiba mendapatkan kesalahan ini:

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)

@picosam . Saya pernah mengalami masalah ini sebelumnya. Masalahnya adalah Anda tidak mengimpor file js masterclusterer atau kode menggunakan Masterclusterer sebelum file js masterclusterer diimpor.

Terima kasih banyak @ vugar005 - masalahnya, saya belum menyentuh kode itu cukup lama! File .js termasuk dalam .angular-cli.json dan memang benar bahwa saya tidak memiliki pernyataan import * as ... dalam file .ts . Tentu saja ketika saya mencoba menambahkan pernyataan import secara manual, saya mendapat kesalahan bahwa .js ekstensi tidak diizinkan!

@picosam Sama -sama. Senang itu membantu Anda.

Fitur ini tersedia melalui paket baru @ agm / js-marker-clusterer (# 1044)

@SebastianM Terima kasih telah menyediakan fitur ini di angular-google-maps. Saya mencoba untuk mendapatkan acara klik untuk bekerja pada klik cluster, tampaknya saat ini tidak tersedia. ada solusi untuk hal yang sama?

@andorfermichael Contoh Anda tampak hebat! terima kasih telah memberikan contoh itu. dalam contoh Anda, saya mencoba memasukkan api google maps melalui halaman indeks tetapi saya terus mengalami kesalahan seperti google tidak ditemukan atau penanda clusterer tidak ditemukan, dll. Ada pemikiran?

@jpcode hai terima kasih untuk solusi Anda, itu berhasil, tetapi masalah bahwa jika saya menggunakan direktif i cant contol sisa evenets yang kita miliki di agm-marker. apakah ada cara untuk menambahkannya ke agm-marker? atau untuk menambahkan acara yang kami miliki di agm-marker pada arahan Anda?