Angular-google-maps: FitBounds का उपयोग कर

मैं जानना चाहता हूं कि इस फिटबाउंड फ़ंक्शन का उपयोग करने के लिए मेरे मार्करों से सीमाएं कैसे उत्पन्न करें। मैं अपने जीवन के लिए यह पता नहीं लगा सका कि बाउंड में पास करने के लिए लैटलिंग ऑब्जेक्ट कैसे बनाया जाए। फ़ंक्शन को बढ़ाता है, इसलिए मैं कोणीय 2 बाइंडिंग का उपयोग कर सकता हूं और sebm-google-map-marker की फिटबाउंड संपत्ति को मेरी सीमा चर में मैप कर सकता हूं।
@suleymanozev - मुझे पता है कि जब तक मैं लैटलिंग ऑब्जेक्ट उत्पन्न कर सकता हूं तब तक फिटबाउंड का उपयोग कैसे करें। क्या आप एक साथ काम करना चाहते हैं?

मेरा अस्थायी काम मेरे डिवाइस डेटा के माध्यम से लूप करना है और पश्चिम, पूर्व, उत्तर और दक्षिण के बीच औसत का उपयोग करके मैन्युअल रूप से मेरे केंद्र बिंदु की गणना करना है क्योंकि मैं काम करने के लिए फिट नहीं हो सकता। जाहिर है इस तरीके का इस्तेमाल करने से आपको सेंटर सही मिलेगा लेकिन जूम लेवल सही नहीं होगा।

west = devicedata[0].Long;
east = devicedata[0].Long;
north = devicedata[0].Lat;
south = devicedata[0].Lat;
for(let dev of this.devicedata) {
if(west > dev.Long){
west = dev.Long
}
if(east < dev.Long){
east = dev.Long
}
if( north < dev.Lat){
north = dev.Lat
}
if( south > dev.Lat){
south = dev.Lat
}
}
this.center.lat = (north + south)/2;
this.center.lng = (east + west)/2;

अद्यतन
मैंने LatLngBoundsLiteral का उपयोग करने का निर्णय लिया और मेरी गणना की गई पूर्व, पश्चिम, उत्तर, दक्षिण को सीधे मैप किया और ऐसा लगता है कि यह काम कर रहा है।

var offset = 0.25;
this.boundsl = <LatLngBoundsLiteral>{west: west - offset, north: north + offset, south: south - offset, east: east + offset};

फिर एचटीएमएल कोड
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

आप इस फ़ंक्शन के साथ LatLngBounds उत्पन्न कर सकते हैं:

import { MapsAPILoader } from 'angular2-google-maps/core';
constructor(private mapsAPILoader:MapsAPILoader) {}
this.mapsAPILoader.load().then(() => {let latlngbounds = new google.maps.LatLngBounds();})

महत्वपूर्ण हिस्सा यह है कि MapsApiLoader angular2-google-maps से, क्योंकि आप इस घटना को निकाल दिए जाने से पहले google.maps ऑब्जेक्ट का उपयोग नहीं कर सकते।

दोस्तों, मैंने इस कमिटमेंट को @SebastianM से देखा। https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
ऐसा लगता है कि उन्होंने पहले ही फिटबाउंड विशेषता को हटा दिया है। क्या हमें इसके बजाय अक्षांश और देशांतर का उपयोग करना चाहिए?

मैं एंगुलरजेएस पर उपयोग के रूप में सीमा उत्पन्न करने के साथ समाप्त हुआ और फिर सीमाओं के आधार पर केंद्र अक्षांश और लंबे समय की गणना करता हूं। अभी भी कुछ और चीजें संभालनी हैं जैसे ज़ूम स्तर।

हो सकता है कि यह आप लोगों के लिए मददगार हो।

generateBounds(markers): any {
        if (markers && markers.length > 0) {
            var bounds = new google.maps.LatLngBounds();

            markers.forEach((marker: any) => {
                bounds.extend(new google.maps.LatLng({ lat: marker.latitude, lng: marker.longitude }));
            });

            //check if there is only one marker
            if (bounds.getNorthEast().equals(bounds.getSouthWest())) {
                var extendPoint = new google.maps.LatLng(bounds.getNorthEast().lat() + 0.01, bounds.getNorthEast().lng() + 0.01);
                bounds.extend(extendPoint);
            }

            return {
                northeast: {
                    latitude: bounds.getNorthEast().lat(),
                    longitude: bounds.getNorthEast().lng()
                },
                southwest: {
                    latitude: bounds.getSouthWest().lat(),
                    longitude: bounds.getSouthWest().lng()
                }
            }
        }
        //return empty object when no bundle selected
        return {};
    }

this.bounds = this.generateBounds(this.bundleMarkers)
this.lat = (this.bounds.northeast.latitude + this.bounds.southwest.latitude) / 2;
this.lng = (this.bounds.northeast.longitude + this.bounds.southwest.longitude) / 2;

<sebm-google-map [latitude]="lat" [longitude]="lng">        
    <sebm-google-map-marker 
        *ngFor="let marker of bundleMarkers"
        [latitude]="marker.latitude"
        [longitude]="marker.longitude"
        [label]="marker.label"
        [title]="marker.title">
    </sebm-google-map-marker>
</sebm-google-map>

हैलो, मैंने इस lib का उपयोग करना शुरू कर दिया है और यह आश्चर्यजनक है। मैं मार्करों के आधार पर अपने मानचित्र को केंद्र में रखना चाहता हूं और मुझे समझ में नहीं आता कि इसे इतना कठिन क्यों बनाया गया है ...
मैंने अपने मार्कर घोषित किए और एक सरल विधि लिखी जो मार्करों के आधार पर मानचित्र को केंद्र में रखेगी:

getCenterMarkers (): शून्य {

    let lat: number = 0;
    let lng: number = 0;

    this.markers.forEach(marker => {
        lat += marker.lat;
        lng += marker.lng;
    });

    this.center.lat = lat/this.markers.length;
    this.center.lng = lng/this.markers.length;
}

@VinceEeckhout मुझे समझ में नहीं आता कि इसे इतना कठिन क्यों बनाया गया है ...

क्योंकि सेंटर मिलना तो ठीक है, लेकिन 'ज़ूम' लेवल का क्या। यहीं पर LatBounds आता है और मुझे अभी भी इसे लागू करने का एक उचित तरीका खोजना है।

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

 constructor(private mapsAPILoader: MapsAPILoader) {
        this.mapsAPILoader.load().then(() => {
                **this.latlngBounds = new window['google'].maps.LatLngBounds();**
                this.measurement.locations.forEach((location) => {
                    this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                })
            }
        )
)

            <sebm-google-map
                    [latitude]="lat"
                    [longitude]="lng"
                    [zoomControl]="false"
                    [disableDefaultUI]="true"
                    [streetViewControl]="false"
                    [mapDraggable]="false"
                    **[fitBounds]="latlngBounds"**
                    [scrollwheel]="false">
                <sebm-google-map-marker
                        *ngFor="let location of measurement.locations"
                        [latitude]="location.lat"
                        [longitude]="location.lng">
                </sebm-google-map-marker>
            </sebm-google-map>

@trungk18 मानचित्र को केंद्र में रखने के बाद सभी मार्करों को देखने के लिए ज़ूम आउट या ज़ूम इन कैसे करें?

@Jonatthu मैंने इसे लंबे समय तक उपयोग नहीं किया है, लेकिन क्या आपने ऊपर दिए गए

@ trungk18 हाँ, और यह काम कर रहा है, लेकिन ऐसा लगता है कि उपयोगकर्ता द्वारा लागू किए गए अंतिम ज़ूम को पकड़ रहा है: /

@tscislo क्या
मुझे माप के प्रकार का पता नहीं है मुझे ILocation कहां मिल सकता है?
मुझे केवल @angular/common . में स्थान मिल सकता है

@Jonatthu sebm कंटेनर को देखें, यह कहता है: 'स्क्रॉलव्हील = झूठा', कोई आश्चर्य नहीं कि आप ज़ूम इन या आउट नहीं कर सकते।

और यदि आप प्रारंभिक लेटबाउंड के बाद कुछ बदलते हैं तो आपको latlngbounds को रीसेट करने के लिए ज़ूम स्तर फिर से आवंटित करना होगा।

@tscislo ने इसे अच्छा किया और मैं इसे काम करने में कामयाब रहा। उन्होंने अलग-अलग वेरिएबल्स का इस्तेमाल किया लेकिन कोई भी प्रोग्रामर इसका पता लगा सकता है।

मैंने इसे निम्नलिखित किया:

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

latlngBounds;

    constructor(
        ...
        private mapsAPILoader: MapsAPILoader
    ) { };

    this.mapsAPILoader.load().then(() => {
                    this.latlngBounds = new window['google'].maps.LatLngBounds();
                    this.markers.forEach((location) => {
                        this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng))
                    })
                });



md5-3b89998d3378d7952a828cbdec3a9606




 <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom" [disableDefaultUI]="false" [zoomControl]="false" (mapClick)="mapClicked($event)" [streetViewControl]="false" [fitBounds]="latlngBounds" class="content-map"> </sebm-google-map>

@Cacanny मानचित्र पर ऑफ़सेट डालने का कोई तरीका?

@VinceEeckhout
मैंने अपना उदाहरण अपडेट किया और अपना कस्टम ILocation इंटरफ़ेस हटा दिया जिसकी आपको बिल्कुल भी आवश्यकता नहीं है। मुझे उम्मीद है यह मदद करेगा!

@tscislo मदद के लिए धन्यवाद
@Cacanny मदद के लिए धन्यवाद

नमस्ते @Cacanny और @tscislo वेधशालाओं में एक ही चीज़ का उपयोग कैसे करें। उपरोक्त चीजों को करने से मुझे एक और समस्या हो रही है। पैराम को फिर से पास करने के बाद (स्थानों की सूची द्वारा पृष्ठ को फिर से प्रस्तुत करना) यह त्रुटि दिखाता है कि this.marker अपरिभाषित है। क्या कोई और तरीका है। उत्तरों की सराहना की जाती है।
क्या NgZone का उपयोग करने से यह समस्या हल हो जाती है। यदि हां, तो इस कोड में Ngzone का उपयोग कैसे करें।

यह कैसे बंद है, एपीआई दस्तावेज़ीकरण में दस्तावेज़ीकरण अभी तक नहीं जोड़ा गया है।

@tscislo आपका उदाहरण कहां है कृपया लिंक साझा करें ताकि मैं देख

@samtidbit कृपया मेरे कमेंट फॉर्म पर एक नज़र डालें 23 जनवरी

हाँ कोई वास्तविक गैर-हैकी उदाहरण जिसे हमें अन्य आयातों में लाने की आवश्यकता है?

@tscislo , यह ठीक काम कर रहा है। जानकारी के लिए धन्यवाद।