Angular-google-maps: 마커 클러스터 러를 사용하는 방법?

죄송합니다, 지금 당장 드릴 수있는 조언이 없습니다

@SebastianM 지도 객체에 대한 액세스로 수행 할 수 있다고 생각합니다. 여기를 참조하십시오 : https://github.com/SebastianM/angular2-google-maps/pull/311

아무도 실제로 이것을 했습니까? markerclusterer js 파일이 .getMap ()에서 전달한지도 객체를 좋아하지 않는 것 같습니다.

@AbdulTheProgrammer 내가 있었는데 , 내 가장 큰 희망은 그것이 작동한다는 것입니까? 지도 지시문에서 사용하는 것과 동일한 GoggleMapsAPIWrapper 서비스 인스턴스에서 getMap ()을 호출 한 것이 확실합니다. 이것이 현재 가장 큰 문제입니다 ....

사용자 지정 구성 요소를 사용하여이를 sebm-google-map 안에 포함 시켰습니다. GoogleMapsAPIWrapper 및 nativeMap을 사용합니다.

Google지도 자바 스크립트 API (window.google.maps)를 사용하여 마커를 수동으로 추가 한 다음 MarkerClusterer를 만듭니다.

도움이되기를 바랍니다.

@ricardojbertolin 세바스찬이 여기 # 311에서 지적한 것처럼 도움이됩니다.지도 내부의 사용자 지정 구성 요소는 정확히 네이티브지도 개체에 액세스하는 방법입니다. 물론 관리자 서비스를 사용하여 마커를 추가하는 더 좋은 방법이 있어야합니다. js API를 통해 수동으로 수행하는 것과 반대 ...

또한 js-marker-clusterer가 작동하도록 고군분투하고 있습니다. 기본지도 인스턴스에 대한 참조를 얻지 만 기본지도 마커에 대한 참조도 필요합니다. 누구나 내 <sebm-google-map-marker> 대한 기본지도 마커를 얻을 수있는 방법에 대한 아이디어가 있습니까?

헉헉
맞춤 구성 요소 및 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 서비스에 대한 공급자를 지정하지 않았기 때문에 공급자를 찾을 때까지 구성 요소 트리로 이동합니다. 이 경우 한 단계 더 올라 갔으며 sebm-google-map 구성 요소에 제공된 GoogleMapsAPIWrapper를 사용합니다.

@jfmaeck MarkerManager 서비스에 사용할 수있는 getNativeMarker() 메서드가 있으며 래퍼에 대해 위에서 설명한 메서드를 사용하여 동일한 마커 관리자 서비스 인스턴스를 얻을 수 있습니다.

헉헉
코드를 보면 이제 설명이 의미가 있습니다! 감사 :)

@alexweber 네이티브 마커 인스턴스를 얻는 방법에 대한 힌트를 주셔서 대단히 감사합니다. 그래도 한 가지 질문이 있습니다. MarkerManager 의 getNativeMarker() 메서드는 SebmGoogleMapMarker 인스턴스 (마커 구성 요소)를 매개 변수로 예상합니다. 이 구성 요소를 변수에서 가져 와서 getNativeMarker 함수에 전달하는 방법을 알고 있습니까?

@jfmaeck 문제 없어요! 현재 100 % 확신 할 수는 없지만 구성 요소에서 @ViewChild('myMarker'): SebmGoogleMapMarker # 를 사용하고 마크 업에서 <sebm-google-map-marker #myMarker> just ViewChild는 ngAfterViewInit 에서만 올바르게 해결됩니다.

@alexweber 도와 주셔서 다시 한번 감사드립니다. 불행히도 @ViewChildren을 사용하여 마커에 액세스 할 수 없습니다. Plunkr에서 데모를 포크하고 ViewChildren 결과가 콘솔에 기록되도록 몇 가지 변경했습니다 (현재 빈 배열).

markers after view init []

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

꽤 바쁘신 것 같지만 볼 기회가 있다면 정말 감사하겠습니다.

@ContentChildren 을 사용할 때 @jfmaeck (구성 요소 요소 내부에있는 인스턴스를 가져 http://plnkr.co/edit/mukdlZ7K7CIFm6aTdDTp?p=preview

@jfmaeck 당신은 가까웠습니다. @ViewChildren 하는 플렁크 의 작업 포크가 있습니다 : http://plnkr.co/edit/rJMCFoX9GokturcJljLh?p=preview

사용자 정의 맵 구성 요소 @ContentChildren ( @ SebastianM이 지적한 것과 같은)를 사용하여 작동하도록하려면 작동하지만 마커에 액세스하기 위해 생성 한 것으로 가정하고 실제로 추가 구성 요소를 처음.

@SebastianM 및 @alexweber 대단히 감사합니다!

@alexweber @SebastianM 우선, js-marker-clusterer를 사용하는이 라이브러리를 어떻게 포함합니까? 특정 확대 / 축소 수준에서 클러스터를 사용하는 방법이 있습니까? 다음과 같이 클러스터에 대한 이미지를 어떻게 포함합니까? http://i65.tinypic.com/10gxkcw.png

@ricardojbertolin 코드를 공유 할 수 있습니까? 저는 angular2를 처음 접했고 (angularjs와 1 년 이상 작업 해 왔습니다) 조금 길을 잃었습니다.

@alexweber ,

@jpcode 죄송합니다, 한동안이 작업을하지 않았습니다 ...

내 프로젝트 중 하나에 작업 솔루션이 있습니다.
필요한 경우 플 런커를 예제와 함께 사용할 수 있습니까?
@jpcode
헉헉

@ siegerx3 좋은, 많은 도움이 될 것입니다.
나는 google maps api + markerclusterer.js를 사용하여 대안으로 작업하고 있습니다.

@ siegerx3 , 이것은 Google지도 lib를 사용하는 기본 예입니다.
https://plnkr.co/Tr1Ykkj12HCkF9InQmuW

POC 보류 :
angular2-google-maps를 사용하는 방법은 "google"과 같은 전역 개체와의 충돌을 방지하기 위해 내부에 추가해야한다고 생각합니다.
해결 방법은 lib에서 Google로드를 방지하는 것입니다.
제공 (MapsAPILoader, {useClass : NoOpMapsAPILoader})하고 직접로드하고 clusterer.js를 추가합니다.

그러나 angular2-google-maps가 clusterer를 지원하는 지시문을 추가하면 더 좋습니다. :)

@jpcode
나는 성공하지 못한 채 플 런커에서 작동하도록 몇 시간을 보냈습니다.
항상 문제와 관련이없는 오류가 발생했습니다.
그래서 여기서 코드를 보여 드리겠습니다.

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 , angular2-google-maps를 사용하여 POC를 만들었습니다.

접근하다:

• index.html에서 Google지도 추가
• clusterer.js 가져 오기
• angular2-google-maps에서 google maps lib로드 방지 (provider 사용)
• lib에서 원래 맵 인스턴스를 가져 오는 지시문 추가
• google / markercluster 변수를 사용하여 전역으로 사용

angular-2-google-maps의 다른 지시문을 사용할 수도 있지만 클러스터 러를 지원하기 위해 lib에 무언가를 추가하면 더 좋습니다.
->

이 lib를 사용하여지도를 그리는 것은 의미가 없기 때문에 다음에는 Google지도를 사용하기 만하면됩니다.이 경우 plunkr가 보여주기 전에 google maps libs + clusterer.js를 사용하는 것이 더 낫다고 생각합니다.

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에서 공급자를 사용하여 Google지도를 두 번로드하는 것을 방지하는 방법
구성 요소 정의에서 공급자 추가

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>

@jpcode
나는 이것이 angular2-google-maps 라이브러리에 추가되어야한다는 데 동의하지만 내 솔루션에서는 언급 한 것처럼 maps sdk가 두 번로드되지 않습니다.

나는 단지 agm lib가 할 수있는 한 많이하고 필요한 부분을 직접 수행하도록합니다.

뿡 빵뀨
zip 파일로 작업 예제를 공유해 주시겠습니까?

뿡뿡
그게 충분하다면 내일 만들 게요 :)
angular-cli에 대해 잘 알고 있습니까? 그렇지 않으면 기본적인 것을 할 것입니다.

뿡 빵뀨
네, 조금 ... Google지도 API + 마커 클러스터 러를 사용하여 클러스터 화를 실행할 수있었습니다. 대신 angular2-google-maps ...를 사용하여 솔루션을 완벽하게 파악하고 싶습니다.
당신의 도움을 많이 tnx

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

npm install 및 ng serve . angular-cli가 설치되지 않은 경우 먼저 npm install angular-cli -g 설치하십시오.

이것은 최적의 솔루션이 아닙니다. 아직 클러스터 지시문이 없기 때문에 내가 만든 해결 방법입니다.

편집하다:
아톰이 작동하지 않아서 포맷팅이 이상 할 수 있으니 오래된 에디터를 사용하고 있었어요 ^^

뿡 빵뀨
감사합니다. 이 솔루션을 확인하겠습니다 :)

앵귤러 2 구글 맵에 포함 된 업데이트가 있습니까? 작업중인 프로젝트에 정말 사용해야합니다.

안녕하세요.
저를 포함한 사람들이 제공 한 예제 중 하나를 계속 사용할 수 있습니다. :)
당연히 충분하다면

뿡뿡
Btw 모든 것이 작동 했습니까? 도움이 되었나요?

뿡 빵뀨
네, 많은 도움이되었습니다. 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);

        });

Observable 외부에서 markerCluster를 선언 한 다음 시작시 존재하는 경우 clearMarkers ()라는 함수를 실행하여지도에서 기존 마커를 제거하지만 배열에는 남겨 둡니다 (따라서 다른 논리는 배열을 비 웁니다. ).

내 문제를 해결하는 것이, 어쩌면 siegerx3 @ 당신도 도움이됩니다

뿡뿡

그 부분을 다시 작업 할 때 확인하겠습니다. 감사합니다. :)

안녕하세요 여러분,이 힌트에 감사드립니다
하위 구성 요소를 사용하여 getNativeMap을 얻었습니다.
지도 컨텍스트 메뉴를 구현하고 있습니다.
<sebm-google-map> <mapmenu-component></mapmenu-component>
제 경우의 문제는 하위 구성 요소 템플릿이 보이지 않는다는 것입니다.
그것은 HTML로 렌더링됩니다
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
보이지 않는 구성 요소입니다

원칙적으로 sebm-google-map 안에 html을 넣을 수 있습니까?
OverlayView를 사용하지 않고 HTML로 갖고 싶습니다.

기능을 2 개의 구성 요소 (지시문 + 구성 요소)로 분리하여 처리 할 수있었습니다.
1.) sebm-google-map 내부에 있어야하며 api 접근 자 역할을하는 것
2.) sebm-google-map 외부에 있어야하는 것 (그렇지 않으면 생성 된 html이 표시되지 않기 때문)

안녕하세요 팀,
@ siegerx3 https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc 의 코드를 사용했습니다.
잘 작동하지만 통합 할 수 없습니다.과. 내가 달성하려는 것은 클러스터 + 마커 레이블 + 정보 창을 통합하는 것입니다. 따라서 클러스터를 클릭하면 개인에게 마커 레이블이 있어야하며 클릭하면 정보 창이 나타납니다. @SebastianM 이 어떻게 작동하는지

뿡 빵뀨
클러스터가 아직 모듈에서 구현되지 않았고 모듈의 마커를 사용하지 않기 때문에 클러스터링에 사용되는 동일한 사용자 정의 구성 요소에서 네이티브 맵 API를 사용해야한다고 생각합니다.
바닐라 자바 ​​스크립트에서하는 것처럼 라벨과 정보 창을 수동으로 추가하는 것입니다.

뿡뿡

나는 실제로 이것에 대해 직접 작업하고 있습니다. 라이브러리 용 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 "에 언급 된대로 lat 및 lng를 사용할 수 있는지 알고 있습니까?

@naranmistry 당신이 원하는 것을 조금 지정할 수 있습니까?

당신의 계획이 정확히 뭔지 모르겠어요. 다른 사람이 이해할 수 있습니까?

기본적으로 lng 및 lat 값을 문자열 대신 웨이 포인트에 넣을 수 있기를 원합니다. angular2-google-maps를 사용하여 가능합니까? 경도 및 lattidute 값을 사용하여 여러 특정 경유지가있는 경로를 표시하고 싶습니다.

내가 올바르게 이해하면이 모듈에 대한 연결을 볼 수 없지만 일반적으로 문서를 보면 location Type: string|LatLng|Place 됩니다. 예, 생성자에서 숫자 값을 사용하는 Google지도 LatLng 객체를 사용할 수 있습니다.

그게 당신에게 필요한 것입니까?

기본적으로 문서에 나와있는대로 전달하려고했지만 계속 실패하는 방법을 알고 싶습니다. lat 및 lng를 사용하는 경유지의 작동 예가 있습니까?

혼란스러워서 미안해 더 명확 했어야 했어

나는 그렇게 생각하지 않는다. 하지만 예제로 코드를 제공 할 수 있다면? plunkr 에서처럼, 내가 찾을 수있는 것을 볼 수있었습니다. :)

좋아, 하나 모아 볼게

감사

죄송합니다. _marker-cluster_ 지시문 내의 _infowindow_에서 _click event_를 가로 채거나 각 마커에 대해 _sebm-google-map-info_ 구성 요소를 렌더링 할 수 있나요?

감사합니다!

@fsciuti와 같은 문제가 있습니다.
해결책을 찾았습니까?

agm-maps 는 여전히 클러스터를 지원하지 않기 때문에 @ siegerx3 의 예를 들어 마커 변경 사항과 @nanomoffet의 마커 정보 창 예제를 사용했습니다. 잘 했어! 감사합니다. 귀하의 예가 많은 도움이되었습니다.

무언가를 돌려주기 위해 다음 링크에서 @ siegerx3 예제의 업데이트 된 버전을 제공합니다.

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

다음과 같이 변경되었습니다.

• Angular 4.1 및 @agm/core 에 맞게 종속성 업데이트
• Angular 4.1 및 @agm/core 에 맞게 코드 업데이트
• 마커 변경 감지 추가
• 마커 정보창 예시 추가
• 고정 코드 스타일

@andorfermichael 감사합니다, 당신은 훌륭합니다! 한 가지 질문이 있습니다. 지시문 (마커와 클러스터 모두)의 스타일을 구체화하려면 어떻게해야합니까? 단순히 구성 요소로 만드는 것에 대해 생각했지만 Observable에 옵션과 스타일을 올바르게 공급하는 방법을 모르겠습니다.

@picosam

구성 요소가 필요하지 않고 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';

@handorfermichael danke noch mal !!!
물론 그런 다음 복잡한 아이콘과 최신 Google Maps Javascript 모듈 버전에 문서화 된 모든 것을 사용할 수 있습니다. 맞습니까?

@picosam 그렇게 생각하지만 아직 시도하지 않았습니다

@andorfermichael 이것은 놀라운 직업입니다 👍
그러나 나는 약간의 문제에 직면하고 있습니다

정보창을 클릭하여 다른 경로로 리디렉션해야하는데 정보창에 클릭 이벤트가 없습니다. 그래서 대신 "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 드라이브의 사용자 지정 마커 클러스터를 사용했으며 정상적으로 작동합니다.
이제 한 가지 문제가 있습니다. 마커를 클릭하고 부트 스트랩 모달을 열어야합니다. 그러나 나는 이것을 어떻게 할 수 있는지 정말로 모른다. 클릭시 이벤트 리스너를 사용하고 경고를 표시하려고했지만 작동하지만 부트 스트랩 모달을 팝하는 방법을 모르겠습니다. 어떤 아이디어?

감사 :)

안녕하세요, 정보창에 버튼을 추가했는데 클릭 이벤트가 잡히지 않습니다. 어떻게하는지 아시나요?

안녕하세요.
안녕하세요 솔루션에 감사드립니다. 내부 마커에 따라 클러스터 색상을 변경하는 데 도움을 주시겠습니까? 빨강, 노랑 및 파랑과 같은.
종류 안부

@ vugar005 색상을 변경하여 정확히 무엇을 의미하는지 이해하지 못합니다. 필요에 따라 클러스터의 이미지를 간단히 변경할 수 있습니다. 내가 아는 한 Google의 마커 클러스터 라이브러리는 클러스터 당 마커 수가 증가함에 따라 사용되는 m1 ~ m5 (m = 기본값)라는 5 개의 서로 다른 이미지를 제공합니다. 정확한 임계 값을 모르겠습니다. 자세한 내용은 Google Developers MapsDocumentation을 참조하세요 . 그래서 저는 서로 다른 색상으로 5 개의 이미지를 만들고 이름을 cluster1에서 cluster5로 지정하고 assets 폴더 안에 배치하는 것이 좋습니다.

@AlexisNi 당신은

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

@joaolbaptista 미안하지만 Google지도 마커와 결합하더라도 Bootstrap에 대한 귀하의 질문은 내 의견으로는 주제를 벗어났습니다. 나는 stackoverflow 에서 동일한 질문 (조금 더 자세히)을 제안 할 것입니다.)

@andorfermichael 실제로 클러스터 내의 마커 수에 따라 아이콘을 변경하는 것을 의미했습니다. 그래서 기본 Google 웹 API로 전환했습니다. 희망 각도지도는 향후 클러스터 서비스를 제공 할 것입니다.
어쨌든 고마워

@ vugar005 그것이 내가 설명하려고 한 것입니다. 기본 Google지도 API조차도 5 개의 서로 다른 이미지에 대한 가능성 만 제공합니다. 이러한 각 이미지는 특정 임계 값에 도달 할 때 표시됩니다 (예 : cluster1 (m1) 0-10, cluster2 (m2) 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)

@picosam . 나는 전에이 문제가 있었다. 문제는 masterclusterer js 파일을 가져 오지 않았거나 masterclusterer js 파일을 가져 오기 전에 코드가 Masterclusterer를 사용한다는 것입니다.

@ vugar005에 감사드립니다-사실 저는 그 코드를 꽤 오랫동안 건드리지 않았습니다! .js 파일이 .angular-cli.json 포함되어 있으며 .ts 파일에 import * as ... 문이없는 것은 사실입니다. 물론 import 문을 수동으로 추가하려고 할 때 .js 확장이 허용되지 않는다는 오류가 발생했습니다!

@picosam 천만에요 . 도움이되었다 니 다행입니다.

이 기능은 새로운 @ agm / js-marker-clusterer 패키지 (# 1044)를 통해 사용할 수 있습니다.

@SebastianM angular-google-maps에서이 기능을 사용할 수있게

@andorfermichael 귀하의 예는 훌륭해 보입니다! 예를 들어 주셔서 감사합니다. 귀하의 예에서 나는 색인 페이지를 통해 Google지도 API를 포함하려고하지만 Google을 찾을 수 없거나 마커 클러스터 러를 찾을 수 없음 등과 같은 오류가 계속 발생합니다.

@jpcode 안녕하세요 귀하의 솔루션에 감사드립니다.하지만 지시문을 사용하면 agm-marker에있는 나머지 짝수를 제어 할 수 없다는 문제가 있습니다. agm-marker에 추가하는 방법이 있습니까? 또는 지시문의 agm-marker에있는 이벤트를 추가하려면?