Angular-google-maps: FitBoundsを使用して

このfitbound関数も使用するために、マーカーから境界を生成する方法を知りたいです。 生涯、bound.extends関数に渡すLatLngオブジェクトを作成する方法を理解できなかったため、Angular 2バインディングを使用して、sebm-google-map-markerのfitBoundsプロパティをbounds変数にマップできました。
@ 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();})

重要な部分は、angular2-google-mapsのMapsApiLoaderです。これは、このイベントが発生する前に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コンストラクターを含めることも可能ですか？
測定の種類がわかりません。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 1月23日私のコメントフォームをご覧ください

ええ、他の輸入品を持ち込む必要がある、ハッキーではない本当の例はありますか？

@tscislo 、