Angular-google-maps: 다음을 사용하는 FitBounds

이 fitbound 기능도 사용하기 위해 마커에서 경계를 생성하는 방법을 알고 싶습니다. 나는 angular 2 바인딩을 사용하고 sebm-google-map-marker의 fitBounds 속성을 내 bounds 변수에 매핑할 수 있도록 bound.exists 함수에 전달할 LatLng 개체를 만드는 방법을 평생 알 수 없었습니다.
@suleymanozev -- LatLng 개체를 생성할 수 있는 한 fitbounds를 사용하는 방법을 알고 있습니다. 함께 작업하시겠습니까?

임시 해결 방법은 장치 데이터를 반복하고 작업에 적합하지 않기 때문에 서쪽, 동쪽, 북쪽 및 남쪽 사이의 평균을 사용하여 수동으로 중심점을 계산하는 것입니다. 분명히 이 방법을 사용하면 중심을 올바르게 얻을 수 있지만 확대/축소 수준이 올바르지 않을 것입니다.

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

그런 다음 HTML 코드
<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();})

중요한 부분은 이 이벤트가 시작되기 전에 google.maps 개체를 사용할 수 없기 때문에 angular2-google-maps의 MapsApiLoader입니다.

여러분, @SebastianM에서 이 커밋을 보았습니다. https://github.com/SebastianM/angular2-google-maps/commit/d625ab6796768d167d7a0f9f2b9a504fce8a2bea
그가 이미 fitbounds 속성을 제거한 것 같습니다. 대신 위도와 경도를 사용해야 합니까?

AngularJS에서 사용하면서 경계를 생성한 다음 경계를 기반으로 중심 위도와 경도를 계산했습니다. 확대/축소 수준과 같이 처리해야 할 몇 가지 사항이 더 있습니다.

분들에게 도움이 될 수 있습니다.

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 오랫동안 사용하지 않았지만 위의 generateBounds 기능을 사용해

@trungk18 예, 작동하지만 사용자가 마지막으로 적용한 확대/축소를 유지하는 것 같습니다

@tscislo 생성자도 포함할 수 있습니까?
ILocation은 어디에서 찾을 수 있습니까? 측정 유형을 모르겠습니다.
@angular/common에서만 위치를 찾을 수 있습니다.

@Jonatthu 는 sebm 컨테이너를 보면 'scrollwheel=false'라고 되어 있습니다. 확대하거나 축소할 수 없는 것은 당연합니다.

그리고 초기 latbounds 이후에 무언가를 변경하면 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>

@Ccanny 지도에 오프셋을 넣을 수 있는 방법이 있습니까?

@VinceEeckhout
내 예제를 업데이트하고 전혀 필요하지 않은 사용자 지정 ILocation 인터페이스를 제거했습니다. 도움이 되기를 바랍니다!

@tscislo 도움 감사합니다 👍
@Ccanny 도움 감사합니다 👍

@Ccanny님 과 @tscislo님 안녕하세요. Observable 에서 같은 것을 사용하는 방법입니다. 위의 작업을 수행하면 또 다른 문제가 발생합니다. params를 다시 전달한 후(장소 목록으로 페이지를 다시 렌더링) this.marker가 정의되지 않은 오류를 표시합니다. 다른 방법이 있습니까? 답변에 감사드립니다.
NgZone을 사용하면 이 문제가 해결됩니다. 그렇다면 이 코드에서 Ngzone을 사용하는 방법.

이것이 어떻게 닫혔는지, 문서는 아직 API 문서에 추가되지 않았습니다.

@tscislo 귀하의 예는 어디에

@samtidbit 1월 23일 내 의견 양식을 봐주세요

예, 다른 수입품을 가져와야 하는 해킹이 아닌 실제 예가 있습니까?

@tscislo , 잘 작동합니다. 정보 주셔서 감사합니다.