Angular-google-maps: FitBounds с использованием

Я хотел бы знать, как сгенерировать границы из моих маркеров, чтобы также использовать эту функцию fitbound. Я не мог на всю жизнь понять, как создать объект LatLng для перехода в функцию bound.extends, чтобы я мог использовать привязку angular 2 и сопоставить свойство fitBounds sebm-google-map-marker с моей переменной границ.
@suleymanozev - Я знаю, как использовать fitbounds, если могу сгенерировать объект LatLng. Вы хотите работать вместе?

Моя временная работа - это перебрать данные моего устройства и просто вручную вычислить мою центральную точку, используя среднее значение между западом, востоком, севером и югом, поскольку я не могу подготовиться к работе. Очевидно, используя этот метод, вы получите правильный центр, но уровень масштабирования будет неправильным.

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

Важной частью является то, что MapsApiLoader из angular2-google-maps, потому что вы не можете использовать объект google.maps до того, как это событие будет запущено.

Ребята, я видел этот коммит от @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>

Здравствуйте, я начал использовать эту библиотеку, и это потрясающе. Я пытался центрировать свою карту по маркерам, и я не понимаю, почему это так сложно ...
Я объявил свои маркеры и написал простой метод, который будет центрировать карту по маркерам:

getCenterMarkers (): void {

    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 Можно ли еще и конструктор включить?
Я не знаю тип измерения ru где я могу найти ILocation?
Я могу найти местоположение только в @ angular / common

@Jonatthu посмотрите на контейнер sebm, там написано: 'scrollwheel = false', неудивительно, что вы не можете увеличивать или уменьшать масштаб.

И если вы измените что-то после начальных широт, вам придется снова назначить уровень масштабирования, чтобы сбросить широты.

@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 в этом коде.

Как это закрыто, документация еще не добавлена ​​в документацию по API.

@tscislo где ваш пример, поделитесь ссылкой, чтобы я мог видеть

@samtidbit, пожалуйста, взгляните на мою форму комментариев 23 января

Ага, есть какой-нибудь реальный не-хакерский пример, который нам нужно привнести в другой импорт?

@tscislo , все работает нормально. Спасибо за информацию.