Angular-google-maps: FitBounds menggunakan

Saya ingin tahu cara menghasilkan batas dari penanda saya untuk menggunakan fungsi yang sesuai ini juga. Saya tidak dapat seumur hidup saya mencari cara untuk membuat objek LatLng untuk diteruskan ke fungsi bound.extends sehingga saya dapat menggunakan pengikatan sudut 2 dan memetakan properti fitBounds dari sebm-google-map-marker ke variabel batas saya.
@suleymanozev -- Saya tahu cara menggunakan fitbounds selama saya bisa menghasilkan objek LatLng. Apakah Anda ingin bekerja sama?

Pekerjaan sementara saya adalah mengulang data perangkat saya dan menghitung secara manual titik pusat saya menggunakan rata-rata antara barat, timur, utara, dan selatan karena saya tidak bisa fit untuk bekerja. Jelas menggunakan metode ini Anda akan mendapatkan bagian tengah yang benar tetapi tingkat zoom tidak akan benar.

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;

Memperbarui
Saya memutuskan untuk menggunakan LatLngBoundsLiteral dan memetakan timur, barat, utara, selatan yang saya hitung langsung ke sana dan tampaknya berfungsi.

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

Kemudian kode HTML
<sebm-google-map #mygmap [latitude]="center.lat" [longitude]="center.lng" usePanning="true" [fitBounds]="boundsl">

Anda dapat menghasilkan LatLngBounds dengan fungsi ini:

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

Bagian penting adalah bahwa MapsApiLoader dari angular2-google-maps, karena Anda tidak dapat menggunakan objek google.maps sebelum acara ini dipecat.

Teman-teman, saya melihat komit ini dari @SebastianM. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
Sepertinya dia telah menghapus atribut fitbounds. Haruskah kita menggunakan garis lintang dan garis bujur saja?

Saya akhirnya menghasilkan batas seperti yang saya gunakan pada AngularJS dan kemudian menghitung lat tengah dan panjang berdasarkan batas. Masih ada beberapa hal lagi yang harus ditangani misalnya tingkat zoom.

Mungkin bisa bermanfaat buat kalian.

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>

Halo, saya mulai menggunakan lib ini dan itu luar biasa. Saya telah mencari untuk memusatkan peta saya berdasarkan penanda dan saya tidak mengerti mengapa ini dibuat begitu sulit ...
Saya mendeklarasikan penanda saya dan menulis metode sederhana yang akan memusatkan peta berdasarkan penanda:

getCenterMarkers(): batal{

    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 Saya tidak mengerti mengapa ini dibuat begitu sulit ...

Karena mendapatkan pusat tidak apa-apa, tetapi bagaimana dengan level 'zoom'. Di sinilah LatBounds berperan dan saya masih harus menemukan cara yang tepat untuk mengimplementasikannya.

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 Bagaimana cara memperkecil atau memperbesar untuk melihat semua penanda setelah memusatkan peta?

@Jonatthu Saya sudah lama tidak menggunakannya, tetapi apakah Anda sudah mencoba fungsi generateBounds di atas?

@trungk18 Ya, dan itu berfungsi tetapi sepertinya menahan zoom terakhir yang diterapkan oleh pengguna:/

@tscislo Apakah mungkin untuk juga menyertakan konstruktor?
Saya tidak tahu jenis pengukuran di mana saya dapat menemukan ILocation ?
Saya hanya dapat menemukan Lokasi di @angular/common

@Jonatthu lihat wadah sebm, katanya: 'scrollwheel=false', tidak heran Anda tidak dapat memperbesar atau memperkecil.

Dan jika Anda mengubah sesuatu setelah latbound awal, Anda harus mengalokasikan level zoom lagi untuk mengatur ulang latlngbounds.

@tscislo melakukannya dengan baik dan saya berhasil membuatnya bekerja. Dia menggunakan variabel yang berbeda tetapi setiap programmer dapat mengetahuinya.

Saya melakukannya sebagai berikut:

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 cara apa pun untuk memberikan offset ke peta?

@VinceEeckhout
Saya memperbarui contoh saya dan menghapus antarmuka ILocation khusus saya yang tidak Anda perlukan sama sekali. Saya harap ini membantu!

@tscislo Terima kasih atas bantuannya 👍
@Cacanny Terima kasih atas bantuannya 👍

Halo @Cacanny dan @tscislo cara menggunakan hal yang sama di observables. Dengan melakukan hal-hal di atas saya mendapatkan masalah lain. Setelah melewati params lagi (re-render halaman dengan daftar tempat) Ini menunjukkan kesalahan bahwa this.marker tidak terdefinisi. Apakah ada cara lain. Jawabannya dihargai.
Apakah menggunakan NgZone memecahkan masalah ini. Jika demikian, Bagaimana cara menggunakan Ngzone dalam kode ini.

Bagaimana ini ditutup, dokumentasi belum ditambahkan ke Dokumentasi API.

@tscislo di mana contoh Anda, tolong bagikan tautannya agar saya bisa melihat

@samtidbit tolong lihat form komentar saya 23 Jan

Ya, adakah contoh nyata non-hacky yang kita butuhkan untuk membawa impor lainnya?

@tscislo , ini berfungsi dengan baik. Terima kasih untuk informasi.