Angular-google-maps: मार्कर क्लस्टर का उपयोग कैसे करें?

कोई खेद नहीं है, मुझे कोई सलाह नहीं है जो मैं अभी आपको दे सकता हूं

@SebastianM मुझे लगता है कि इसे मैप ऑब्जेक्ट तक पहुंच के साथ किया जा सकता है, कृपया यहां देखें: https://github.com/SebastianM/angular2-google-maps/pull/311

क्या वास्तव में किसी ने ऐसा किया है? markerclusterer js फाइलें मैप ऑब्जेक्ट को पसंद नहीं करती हैं जो मैं .getMap () से गुजरता हूं।

@AbdulTheProgrammer मैं इस पर पाने के लिए इंतजार कर रहा था, मेरी सबसे बड़ी उम्मीद है कि यह काम करेगा? आपको यकीन है कि आपने GoggleMapsAPIWrapper सेवा के उसी उदाहरण पर getMap () कहा है, जो नक्शे के निर्देश द्वारा उपयोग किया जाता है, यह इस समय मेरा सबसे बड़ा मुद्दा है ...।

मैंने इसे एक कस्टम घटक का उपयोग करके प्राप्त किया है और इसे sebm-google-map के अंदर शामिल किया है; यह GoogleMAPAPIWrapper और नेटिव मैप का उपयोग करता है।

मैं गूगल मैप्स जावास्क्रिप्ट एपीआई (window.google.maps) का उपयोग करके मैन्युअल रूप से मार्करों को जोड़ता हूं और फिर मार्कर क्लस्टर बनाता हूं।

मुझे उम्मीद है यह मदद करेगा।

@ricardojbertolin जो मदद करता है, जैसे सेबस्टियन ने यहां बताया था # 311, नक्शे के अंदर एक कस्टम कंपोनेंट है कि मूल मैप ऑब्जेक्ट तक कैसे

मैं js-मार्कर-क्लस्टर काम करने के लिए भी संघर्ष कर रहा हूं। मुझे मूल नक्शे उदाहरण के लिए एक संदर्भ मिलता है, हालांकि मुझे मूल मानचित्र मार्करों के संदर्भ भी चाहिए। किसी को भी किसी भी विचार कैसे मेरे <sebm-google-map-marker> s के लिए मूल मानचित्र मार्कर प्राप्त कर सकते हैं?

@alexweber
क्या आपके पास कस्टम घटक और 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 के काम करने के तरीके के कारण, चूंकि हम एक प्रदाता को GoogleMAPAPIWrapper सेवा के लिए निर्दिष्ट नहीं कर रहे हैं, यह तब तक घटक ट्री ऊपर जाएगा जब तक कि यह एक न मिल जाए। इस स्थिति में, यह 1 चरण है और हम GoogleMapsAPIWrapper का उपयोग करते हैं जो sebm-google-map घटक में प्रदान किया गया था

@jfmaeck MarkerManager सेवा पर getNativeMarker() पद्धति है जिसका उपयोग आप उस के लिए कर सकते हैं, और आप उसी मार्कर प्रबंधक सेवा उदाहरण को रैपर के लिए ऊपर वर्णित विधि का उपयोग करके प्राप्त कर सकते हैं।

@alexweber
कोड देखकर, स्पष्टीकरण अब समझ में आता है! धन्यवाद :)

देशी मार्कर उदाहरण प्राप्त करने के तरीके पर आपके संकेत के लिए @alexweber आपका बहुत-बहुत धन्यवाद। मेरे पास अभी भी एक सवाल है, हालांकि: getNativeMarker() MarkerManager की विधि SebmGoogleMapMarker इंस्टेंस (मार्कर घटक) को अपने पैरामीटर के रूप में लेने की उम्मीद करती है। क्या आप जानते हैं कि मैं इस घटक को प्राप्त करने के लिए एक चर में इसे कैसे प्राप्त कर सकता हूं।

@jfmaeck कोई समस्या नहीं! मैं इस समय 100% सुनिश्चित होने की जाँच नहीं कर सकता, लेकिन आप शायद अपने घटक में @ViewChild('myMarker'): SebmGoogleMapMarker का उपयोग कर सकते हैं और इसे # मार्कअप में संदर्भित कर सकते हैं: <sebm-google-map-marker #myMarker> याद रखें ViewChild केवल ngAfterViewInit में सही ढंग से हल करता है।

@alexweber आपकी मदद के लिए फिर से धन्यवाद। दुर्भाग्य से, मैं @ViewChildren का उपयोग करके मार्करों तक पहुंचने का प्रबंधन नहीं कर सका। मैंने प्लंकर पर डेमो को फोर्क किया और उसमें कुछ बदलाव किए ताकि ViewChildren परिणाम कंसोल में लॉग इन हो जाए (फिलहाल एक खाली सरणी):

markers after view init []

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

मुझे लगता है कि आप बहुत व्यस्त हैं लेकिन अगर आपके पास इसे देखने का मौका है, तो मैं वास्तव में इसकी सराहना करूंगा।

@jfmaeck जब आप @ContentChildren का उपयोग http://plnkr.co/edit/mukdlZ7K7C7m6aTdDTp?p=preview

@jfmaeck आप करीब थे, यहाँ @ViewChildren साथ आपके प्लंक का एक काम करने वाला कांटा है: http://plnkr.co/edit/rJMCFoX9GokturcJljLh.p=preview

कस्टम मैप घटक का उपयोग कर काम करने के लिए @ContentChildren (जैसे @SebastianM ने बताया) काम करेगा, लेकिन मुझे लगता है कि आपने इसे केवल मार्करों तक पहुंच प्राप्त करने के लिए बनाया है और यह वास्तव में आवश्यक नहीं है कि अतिरिक्त घटक हो। पहले स्थान पर।

आपको बहुत बहुत @SebastianM और @alexweber धन्यवाद!

सब से @alexweber @SebastianM सबसे पहले, मैं कैसे इस पुस्तकालय है जो आप js-मार्कर-clusterer का उपयोग शामिल हो? क्या एक विशिष्ट ज़ूम-स्तर पर क्लस्टर का उपयोग करने का एक तरीका है? और मैं इस तरह के समूहों के लिए चित्र कैसे शामिल करूं: http://i65.tinypic.com/10gxkcw.png

@ricardojbertolin किसी भी मौका आप अपने कोड साझा कर सकते हैं? मैं angular2 के लिए बहुत नया हूं (एक साल से angularjs के साथ काम कर रहा हूं) और मैं थोड़ा सा खो गया हूं।

@alexweber , क्या आपने markerclusterer.js को जोड़ने का परीक्षण किया? कोई उदाहरण संबंधित है?

@jpcode क्षमा करें, कुछ समय में इस पर काम नहीं हुआ ...

मेरे पास मेरे एक प्रोजेक्ट में काम करने का हल है।
यदि आवश्यक हो तो मैं एक उदाहरण के साथ एक प्लंकर को एक साथ रख सकता हूं?
@jpcode
@alexweber

@ siegerx3 अच्छा, बहुत मदद करेगा।
मैं सिर्फ गूगल मैप्स एपीआई + markerclusterer.js का उपयोग कर वैकल्पिक रूप से काम कर रहा हूं।

@ siegerx3 , यह एक मूल उदाहरण है, जो केवल Google मानचित्रों का उपयोग करता है:
https://plnkr.co/Tr1Ykj12HCkF9InQmuW

POC लंबित:
कोणीय 2-गूगल-मैप्स का उपयोग करने के तरीके में, मुझे लगता है कि वैश्विक ऑब्जेक्ट्स के साथ टकराव को रोकने के लिए "Google" के रूप में अंदर जोड़ने की आवश्यकता है।
वर्कअराउंड लोड Google को lib से रोका जा सकेगा।
प्रदान करें (MapsAPILoader, {useClass: NoOpMapsAPILoader}) और अपने आप से लोड करें और क्लस्टरर.js जोड़ें।

लेकिन बेहतर है अगर कोणीय 2-गूगल-मैप्स क्लस्टर का समर्थन करने के लिए एक निर्देश जोड़ते हैं :)

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

आप इस निर्देश को कोणीय 2-गूगल-मैप्स टैग में डालें:

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

@ siegerx3 , मैंने कोणीय 2-गूगल-मैप का उपयोग करके एक पीओसी बनाया

दृष्टिकोण:

• Index.html से google मैप्स जोड़ें
• आयात क्लस्टर .js
• कोणीय गूगल-गूगल-मैप्स (प्रदाता का उपयोग करके) से लोड होने वाले गूगल मैप्स को रोकें
• Orignal map उदाहरण को lib से प्राप्त करने के लिए एक निर्देश जोड़ें
• वैश्विक के रूप में उपयोग करने के लिए google / markercluster चर का उपयोग करें

आप कोणीय-2-गूगल-मैप्स से अन्य निर्देशों का भी उपयोग कर सकते हैं, लेकिन मुझे लगता है कि अगर क्लस्टर में समर्थन करने के लिए कुछ जोड़ा जाता है तो बेहतर है।
->

क्योंकि मैप को पेंट करने के लिए इस लिब का उपयोग करने का कोई मतलब नहीं है और इसके बाद बस गूगल मैप्स का उपयोग करें, इस मामले में मुझे लगता है कि बेहतर है कि गूगल मैप्स लिबास + क्लेर.जेएस को पहले प्लंकर शो के रूप में उपयोग करें।

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

लोड गूगल मैप्स को रोकने के तरीके में दो बार एंगुलर 2-गूगल मैप्स से एक प्रदाता का उपयोग करें
अपने घटक परिभाषा में एक प्रदाता जोड़ें

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
मैं सहमत हूं कि इसे कोणीय 2-गूगल-मैप्स लाइब्रेरी में जोड़ा जाना चाहिए, हालांकि मेरे समाधान में मैप्स एसडीके दो बार लोड नहीं किया गया है, जैसा कि आपने उल्लेख किया है।

मैं सिर्फ एग्म को उतना ही काम करने देता हूं जितना वह कर सकता है और सिर्फ जरूरी हिस्सों को खुद करता है।

@ siegerx3
क्या आप कृपया ज़िप फ़ाइल में काम करने का उदाहरण साझा कर सकते हैं?

@ नरक sm३
मैं एक कल बनाऊंगा अगर आपके लिए यह पर्याप्त है :)
क्या आप कोणीय-क्लि से परिचित हैं? अन्यथा मैं सिर्फ एक मूल एक करूँगा।

@ siegerx3
हाँ, एक छोटा सा ... मैं गूगल मैप्स एपीआई + मार्कर क्लस्टरर का उपयोग करके क्लस्टरीकरण निष्पादित करने में सक्षम था। मैं समाधान के बारे में संपूर्ण दृष्टिकोण रखने के लिए, बजाय, कोणीय 2-गूगल-मैप ... का उपयोग करना पसंद करूंगा।
आपकी मदद के लिए tnx बहुत

@ नरक sm३
https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc

बस npm install और ng serve । यदि आपके पास कोणीय-क्लि npm install angular-cli -g पहले स्थापित नहीं है।

याद रखें, यह इष्टतम समाधान नहीं है। यह सिर्फ एक वर्कअराउंड मैं बनाया गया है क्योंकि कोई क्लस्टर निर्देश नहीं है।

संपादित करें:
स्वरूपण अजीब हो सकता है क्योंकि मेरा परमाणु काम नहीं कर रहा था, इसलिए मैं अच्छे पुराने संपादक ^ ^ का उपयोग कर रहा था

@ siegerx3
बहुत बहुत धन्यवाद। मैं इस समाधान की जाँच करेंगे :)

क्या इस पर कोई अद्यतन कोणीय 2 गूगल मैप्स में शामिल किया जा रहा है? मैं वास्तव में एक परियोजना पर काम कर im के लिए इसका इस्तेमाल करने की जरूरत है

@SteveDowsett
आप अभी भी मेरे द्वारा प्रदान किए गए लोगों में से एक का उपयोग कर सकते हैं :)
यदि यह आपके लिए पर्याप्त है

@ नरक sm३
Btw ने सब कुछ किया? क्या इसने आपकी मदद की?

@ siegerx3
हां, इससे मुझे बहुत मदद मिली। Tnx!

@ siegerx3

मैंने स्वयं आपके उदाहरण का उपयोग किया, और यह काम कर रहा है, इसलिए कुदोस!

लेकिन अब मेरा मुद्दा यह है कि मैं मार्करों को अद्यतन करने के लिए प्रतीत नहीं कर सकता। मैंने एक अद्यतन सरणी में पास होने के लिए ngOnChanges का उपयोग किया, और मैं सरणी को बदलते हुए देख सकता हूं, लेकिन जब सरणी खाली हो जाती है तो मार्कर हटाए नहीं जाते हैं।

कोई सुझाव?

@nanomoffet
यह मदद की महान!

वास्तव में मैं कुछ दिनों पहले उसी / समान मुद्दे में भाग गया था, लेकिन मेरे पास समाधान खोजने के लिए अभी तक समय नहीं था।

मैं यहाँ पोस्ट करूँगा जब मैंने कुछ पाया।

मुझे लगातार क्लस्टर्स के मुद्दे का हल मिला।

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

        });

मैंने ऑब्जर्वेबल के बाहर मार्कर क्लस्टर घोषित किया, और फिर अगर यह शुरुआत में मौजूद है तो यह एक फ़ंक्शन चलाता है जिसे क्लीमरकार () कहा जाता है जो नक्शे से किसी भी मौजूदा मार्कर को हटा देगा, हालांकि यह उन्हें सरणी में छोड़ देता है (इसलिए सरणी को खाली करने के लिए अन्य तर्क) ) का है।

यह मेरा मुद्दा तय कर दिया, शायद यह आपकी भी मदद करेगा @ siegerx3

@nanomoffet

मैं इसे बाहर की जाँच करेंगे जब मैं उस भाग पर फिर से काम, धन्यवाद :)

हाय दोस्तों, इस संकेत के लिए धन्यवाद
मैं एक उपसमुच्चय का उपयोग करके getNativeMap प्राप्त करने में कामयाब रहा
मैं एक नक्शा संदर्भ मेनू लागू कर रहा हूं
<sebm-google-map> <mapmenu-component></mapmenu-component>
मेरे मामले में समस्या यह है कि सबकोम्पोनेंट टेम्पलेट दिखाई नहीं देता है
यह html में प्रदान किया गया है
<div class="sebm-google-map-content" _ngcontent-rgy-8="">
जो एक अदृश्य घटक है

क्या मैं सिद्धांत रूप से sebm-google-map के अंदर कुछ html रखने में सक्षम हूं?
मैं इसे html के रूप में करना चाहता हूं, ओवरलेव्यू का उपयोग नहीं कर रहा हूं

मैं कार्यक्षमता को 2 घटकों (निर्देश + घटक) में अलग करके इसे संभालने में सक्षम था
1.) एक जो sebm-google-map के अंदर होना चाहिए और एपीआई अभिगमक के रूप में कार्य करता है
2.) एक जो sebm-google-map के बाहर होना चाहिए (क्योंकि अन्यथा मुझे इसका जेनरेट किया गया HTML दिखाई नहीं देता है)

हाय टीम,
@ siegerx3 मैंने https://drive.google.com/open?id=0B4y4KJY7l3rPNTdqR0hyNTRqVHc से आपके कोड का उपयोग किया
यह बहुत अच्छा काम करता है, लेकिन मैं एकीकृत करने में असमर्थ हूंतथा। मैं जो हासिल करने की कोशिश कर रहा हूं वह क्लस्टर + मार्कर लेबल + सूचना विंडो को एकीकृत करना है। इसलिए, जब मैं क्लस्टर पर क्लिक करता हूं, तो व्यक्तियों के पास मार्कर लेबल होना चाहिए और उस पर क्लिक करने पर एक सूचना विंडो पॉप अप होनी चाहिए। किसी भी विचार मैं इस काम @SebastianM कैसे प्राप्त कर सकते हैं

@ प्रकाशप्रकाश
मुझे लगता है कि चूंकि क्लस्टर अभी तक मॉड्यूल में लागू नहीं किया गया है और आप मॉड्यूल से मार्कर का उपयोग नहीं कर रहे हैं, आपको मूल मैप्स एपीआई का उपयोग उसी कस्टम घटक में करना होगा जो क्लस्टरिंग के लिए उपयोग किया जाता है।
मतलब, लेबल और जानकारी विंडो को मैन्युअल रूप से जोड़ना जैसा कि आप वेनिला जावास्क्रिप्ट में करते हैं।

@ प्रकाशप्रकाश

मैं वास्तव में खुद इसी चीज पर काम कर रहा हूं। मुझे लाइब्रेरी के लिए 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 क्या आप कुछ निर्दिष्ट कर सकती हैं कि आप क्या करना चाहते हैं?

मैं नहीं देखता कि आपकी योजना वास्तव में क्या है। शायद किसी और को समझता है?

मूल रूप से मैं एक स्ट्रिंग के बजाय वेनपॉइंट में लैंग और लाट वैल्यूज़ को सक्षम करने में सक्षम होना चाहता हूं, क्या यह एंगुलर 2-गूगल-मैप्स का उपयोग करना संभव है? जैसा कि मैं देशांतर और अक्षांश मूल्यों का उपयोग करते हुए कई विशिष्ट स्टॉप ओवरों के साथ एक मार्ग प्रदर्शित करना चाहता हूं

अगर मैं सही तरीके से समझता हूं, तो मैं इस मॉड्यूल से कनेक्टिनो को नहीं देखता हूं, लेकिन सामान्य तौर पर, यदि आप प्रलेखन को देखते हैं तो यह location Type: string|LatLng|Place कहता है। तो हाँ आप Google मैप्स का उपयोग कर सकते हैं LatLng ऑब्जेक्ट जो कि इसमें कंस्ट्रक्टर में संख्यात्मक मान लेता है।

क्या आपको वही चाहिए?

मूल रूप से मैं जानना चाहता हूं कि कैसे, जैसा कि मैंने इसे पारित करने की कोशिश की, जैसा कि प्रलेखन कहता है, लेकिन यह विफल रहा। क्या लेट और लैंग का उपयोग करने वाले वेपॉइंट्स का एक कार्यशील उदाहरण है?

इस भ्रम के लिए क्षमा करें कि मुझे अधिक स्पष्ट होना चाहिए

मुझे ऐसा नहीं लगता। लेकिन अगर आप एक उदाहरण के रूप में अपना कोड प्रदान कर सकते हैं? प्लंकर की तरह, मैं देख सकता था कि मैं क्या पा सकता हूं :)

ठीक है, मैं कोशिश करूँगा और एक को एक साथ रखूँगा

धन्यवाद

क्षमा करें, क्या मैं _click event_ को _infowindow_ के अंदर _marker-क्लस्टर_ के निर्देशन में रोक सकता हूं या प्रत्येक मार्कर के लिए _sebm-google-map-info_ घटक प्रस्तुत कर सकता हूं?

धन्यवाद!

मेरे पास एक ही मुद्दा है @fsciuti।
क्या आपको एक समाधान मिला ?

चूँकि agm-maps अभी भी क्लस्टर का समर्थन नहीं करता है, मैंने @ siegerx3 का उदाहरण लिया, मार्कर में परिवर्तन और मार्कर जानकारी के उदाहरण @nanomoffet। अच्छा काम! धन्यवाद, आपके उदाहरणों ने बहुत मदद की।

कुछ वापस देने के लिए, मैं निम्नलिखित लिंक के तहत @ siegerx3 उदाहरण का एक अद्यतन संस्करण प्रदान करता हूं:

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

निम्नलिखित परिवर्तन किए गए हैं:

• कोणीय 4.1 और @agm/core फिट करने के लिए अद्यतन निर्भरताएँ
• अद्यतित कोड कोणीय 4.1 और @agm/core फिट करने के लिए
• जोड़ा मार्कर परिवर्तन का पता लगाने
• जोड़ा मार्कर जानकारी खिड़की उदाहरण
• निश्चित कोड शैली

@andorfermichael एक गुच्छा आदमी का धन्यवाद, आप महान हैं! एक प्रश्न कृपया: यदि मैं निर्देशन (दोनों मार्कर और क्लस्टर) की स्टाइल को बाहरी करना चाहता हूं, तो मुझे ऐसा कैसे करना चाहिए? मैं बस इसे एक घटक बनाने के बारे में सोचता था, लेकिन फिर मुझे पता नहीं है कि आपके पास जो विकल्प और शैली है, उसके साथ ऑब्जर्वेबल को सही तरीके से कैसे खिलाया जाए ...

@picosam

आपको ईएस 6 मॉड्यूल का उपयोग करने के बजाय एक घटक की आवश्यकता नहीं है।

उदाहरण के लिए, एक नई फ़ाइल बनाएं और कॉन्फ़िगरेशन निर्यात करें:

_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-क्लस्टर.ts_ में उन चर / मॉड्यूल को आयात करें:

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

@andorfermichael डैंक नोच
बेशक मैं तब आगे जा सकता हूं और जटिल आइकन और सभी का उपयोग कर सकता हूं जो नवीनतम Google मैप्स जावास्क्रिप्ट मॉड्यूल संस्करण में प्रलेखित है, सही है?

@picosam मुझे ऐसा लगता है लेकिन अभी तक कोशिश नहीं की है

@andorfermichael यह एक उल्लेखनीय कार्य है
लेकिन मैं थोड़ी समस्या का सामना कर रहा हूं

मुझे infowindow पर एक क्लिक द्वारा दूसरे मार्ग पर पुनर्निर्देशित करने की आवश्यकता है, लेकिन infowindow में एक क्लिक ईवेंट नहीं है। इसलिए मैंने "क्लोजक्लिक" इवेंट के बजाय उपयोग किया, यहां कोड है

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

सब कुछ ठीक काम करता है लेकिन जब मैं infowindow क्लोज बटन पर क्लिक करता हूं, तो ईवेंट को कॉल किया जाता है लेकिन यह एक एरर फेंकता है
this.router is undefined

_ बेशक कोर्स में राउटर लाइब्रेरी इंपोर्ट की जाती है और राउटर को कंस्ट्रक्टर_ में परिभाषित किया जाता है।

मैंने एक और तकनीक की कोशिश की, मैंने मूल घटक और निर्देश के बीच ईवेंटमिटर (इनपुट / आउटपुट तकनीक) का उपयोग किया।
मैंने वर्ग चर के रूप में @Output() eventEmitter = new EventEmitter() को शीर्ष पर परिभाषित किया,
और उसी स्थान पर घटना,

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

इसके अलावा सब कुछ ठीक काम करता है लेकिन जब मैं infowindow क्लोज बटन पर क्लिक करता हूं, तो ईवेंट को कॉल किया जाता है, लेकिन यह एक एरर फेंक देता है
this.eventEmitter is undefined

क्या इस मुद्दे को ठीक करने का कोई तरीका है?

@ hossam-maurice मुझे लगता है कि त्रुटि this द्वारा caued है। आपके मामले में this वह तत्व है जिसने घटना को निकाल दिया - infowindow। उस कारण से, ES6 / ECMAScript2015 में तीर फ़ंक्शन शुरू किए गए हैं। तीर फ़ंक्शन का उपयोग करना this इस बात पर निर्भर नहीं करता है कि फ़ंक्शन को कैसे बुलाया गया था, लेकिन आसपास के दायरे में।
तो infowindow.addListener('closeclick', () => { this.eventEmitter(id); }); आपके लिए काम करना चाहिए।

आगे के संदर्भ के लिए एक नज़र है: ExploringJS - एरो फ़ंक्शंस और एमडीएन - एरो फ़ंक्शंस

@andorfermichael बहुत बहुत धन्यवाद, इसने काम किया: डी hael

हैलो, मैंने Google ड्राइव से कस्टम मार्कर क्लस्टर का उपयोग किया है और यह ठीक काम करता है।
अब मुझे एक समस्या है, मुझे एक मार्कर पर क्लिक करने और एक बूटस्ट्रैप मोडल खोलने की आवश्यकता है। लेकिन मैं वास्तव में नहीं जानता कि मैं यह कैसे कर पा रहा हूं। मैंने क्लिक पर एक ईवेंट श्रोता का उपयोग करने का प्रयास किया और एक अलर्ट दिखाया और यह काम करता है, लेकिन मैं वास्तव में बूटस्ट्रैप मोडल को पॉप करने का तरीका नहीं जानता। कोई विचार?

धन्यवाद :)

नमस्कार, मैंने जानकारी विंडो के अंदर एक बटन जोड़ा है, लेकिन मैं क्लिक इवेंट को पकड़ने में असमर्थ हूं। क्या आपको इस पर कोई विचार करना है?

@andorfermichael
हाय समाधान के लिए धन्यवाद। क्या आप कृपया इसके अंदर मार्करों के अनुसार क्लस्टर रंगों को बदलने में मदद कर सकते हैं। जैसे कि लाल, पीला और नीला।
सधन्यवाद

@ vugar005 मुझे बिल्कुल समझ में नहीं आ रहा है कि रंग बदलने से आपका क्या मतलब है। आप बस अपनी जरूरतों के अनुसार क्लस्टर की छवि को बदल सकते हैं। जहां तक ​​मुझे पता है, Google की मार्कर क्लस्टर लाइब्रेरी m1 से m5 (m = डिफ़ॉल्ट) नाम की पांच अलग-अलग छवियां प्रदान करती है जो प्रति क्लस्टर बढ़ने वाले मार्कर की संख्या के रूप में उपयोग की जाती हैं। मुझे सटीक थ्रेसहोल्ड की जानकारी नहीं है। Google डेवलपर MapsDocumentation पर अधिक जानकारी। इसलिए, मैं अलग-अलग रंगों के साथ पाँच चित्र बनाने और उन्हें क्लस्टर 1 में क्लस्टर 5 में नाम देने और उन्हें संपत्ति फ़ोल्डर के अंदर रखने का सुझाव दूंगा।

@AlexisNi आप जब पहले से निकाल दिया जाता है, तो जानकारी पर दबंग घटना को सुनने की कोशिश कर सकते हैं

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

@joaolbaptista क्षमा करें, लेकिन Google मैप मार्कर के साथ संयुक्त होने के बावजूद बूटस्ट्रैप के बारे में आपका प्रश्न मेरी राय में ऑफ-टॉपिक है। मैं एक ही सवाल (थोड़ा और अधिक विस्तृत) stackoverflow में पूछने का सुझाव

@andorfermichael I का अर्थ वास्तव में एक क्लस्टर के अंदर मार्करों की संख्या के अनुसार आइकन बदलना है। तो इसलिए मैं देशी गूगल वेब एपीआई के लिए बंद कर दिया। आशा है कि कोणीय नक्शे भविष्य में क्लस्टर सेवा प्रदान करेंगे।
फिर भी धन्यवाद

@ vugar005 यही मैंने समझाने की कोशिश की। यहां तक ​​कि देशी गूगल मैप्स एपी केवल पांच अलग-अलग छवियों के लिए संभावना प्रदान करता है। इन छवियों में से प्रत्येक को एक विशिष्ट सीमा तक पहुंचने पर प्रदर्शित किया जाता है, उदाहरण के लिए, क्लस्टर 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)

@picosam मेरे पास यह मुद्दा पहले था। समस्या यह है कि आपने मास्टरक्लस्टर जेएस फ़ाइल आयात नहीं की या मास्टरक्स्टर जेएस फ़ाइल आयात होने से पहले कोड मास्टरक्स्टर का उपयोग करता है।

बहुत बहुत धन्यवाद @ vugar005 - बात यह है, मैंने काफी समय से उस कोड को नहीं छुआ है! .js फ़ाइल मेरे .angular-cli.json और यह सच है कि मेरे .ts फ़ाइल में import * as ... विवरण नहीं है। बेशक जब मैंने मैन्युअल रूप से import जोड़ने की कोशिश की तो मुझे एक त्रुटि मिली कि .js एक्सटेंशन की अनुमति नहीं है!

@picosam आपका स्वागत है। खुशी है कि यह आपकी मदद की।

यह सुविधा नए @ agm / js-मार्कर-क्लस्टर पैकेज (# 1044) के माध्यम से उपलब्ध है

@SebastianM इस सुविधा को कोणीय-गूगल-मानचित्र में उपलब्ध कराने के लिए धन्यवाद। मैं क्लस्टर पर क्लिक करने के लिए एक क्लिक ईवेंट प्राप्त करने का प्रयास कर रहा हूं, ऐसा लगता है कि वर्तमान में यह उपलब्ध नहीं है। उसी के लिए कोई समाधान?

@andorfermichael आपका उदाहरण बहुत अच्छा लग रहा है! उस उदाहरण को प्रदान करने के लिए धन्यवाद। आपके उदाहरण में, मैं कोशिश कर रहा हूं कि गूगल मैप्स एपि को इंडेक्स पेज के माध्यम से शामिल किया जाए, लेकिन मैं इस तरह की त्रुटियों में रहता हूं जैसे कि Google नहीं मिला या मार्कर क्लस्टर नहीं मिला आदि कोई विचार?

@jpcode हाय आपके समाधान के लिए धन्यवाद, यह काम है, लेकिन समस्या यह है कि अगर मैं निर्देश का उपयोग करता हूं तो बाकी शाम को भी जो हम एग्म-मार्कर में हैं। वहाँ एजीएम के लिए इसे जोड़ने के लिए कोई रास्ता नहीं है? या आपके निर्देश पर एग्म-मार्कर में हमारे साथ होने वाली घटनाओं को जोड़ने के लिए?