Angular-google-maps: FitBounds 使用

我想知道如何从我的标记生成边界以使用这个 fitbound 函数。 我一生都无法弄清楚如何创建一个 LatLng 对象以传递给 bound.extends 函数，以便我可以使用 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（）：无效{

    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 容器，它说：'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>

@Cacanny 有什么办法可以在地图上设置偏移量？

@VinceEeckhout
我更新了我的示例并删除了我根本不需要的自定义 ILocation 接口。 我希望它有帮助！

@tscislo感谢您的帮助👍
@Cacanny感谢您的帮助👍

你好@Cacanny和@tscislo如何在 observables 中使用相同的东西。 通过做上述事情，我得到了另一个问题。 再次传递参数后（通过位置列表重新渲染页面）它显示了 this.marker 未定义的错误。 有没有其他办法。 答案是赞赏。
使用 NgZone 是否解决了这个问题。 如果是这样，如何在此代码中使用 Ngzone。

这是如何关闭的，文档尚未添加到 API 文档中。

@tscislo你的例子在哪里，请分享链接，以便我可以看到

@samtidbit请查看我 1 月 23 日的评论表

是的，我们需要引入其他进口产品的任何真正的非黑客示例吗？

@tscislo ，它工作正常。 谢谢提供信息。