有没有办法在 AGM 地图中设置边界和缩放级别?
Is there a way to set the bounds and Zoom level in AGM Map?
我正在为我的 angular 4 应用程序使用 AGM maps,但我遇到了问题,我将从 api 获取的多个标记作为 Latitude 数组和经度。我想将缩放级别设置为完全覆盖地图上的所有标记。即使一个国家的一个标记和另一个国家的另一个标记,它也应该在加载时设置缩放级别以显示地图上的所有标记。
有没有办法在 AGM angular 地图中做到这一点?谁能帮帮我
目标
我们想设置 AGM 地图的缩放级别以显示地图上的所有标记。通常在 Google 地图 JavaScript API 中,您使用 google.maps.Map class 的 fitBounds()
方法来实现此目的。
https://developers.google.com/maps/documentation/javascript/reference/3/map
因此,我们必须获取地图对象的实例(JavaScript API 实例)并在其上应用 fitBounds()
。
解决方案
我创建了一个简单的例子,它有一个模拟服务,为 5 个标记提供 JSON 数据,并使用 AGM 地图绘制地图和标记。在此示例中,我使用@ViewChild 装饰器来获取 AGM 地图的实例并监听 mapReady
事件以获取地图对象的实例(来自 JavaScript API)。获得地图实例后,我可以轻松地创建 LatLngBounds 对象并在地图对象上调用 fitBounds()
。看看 app.component.ts 中的 ngAfterViewInit()
方法来获得一个想法。
代码片段
app.component.ts
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';
declare var google: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
title = 'AGM project (so48865595)';
lat = 41.399115;
lng = 2.160962;
markers: MyMarker[];
@ViewChild('AgmMap') agmMap: AgmMap;
constructor(private markersService: MarkersService) { }
ngOnInit() {
this.getMarkers();
}
ngAfterViewInit() {
console.log(this.agmMap);
this.agmMap.mapReady.subscribe(map => {
const bounds: LatLngBounds = new google.maps.LatLngBounds();
for (const mm of this.markers) {
bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
}
map.fitBounds(bounds);
});
}
getMarkers(): void {
this.markers = this.markersService.getMarkers();
}
mapIdle() {
console.log('idle');
}
}
app.component.html
<h1>{{ title }}</h1>
<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map #AgmMap [latitude]="lat" [longitude]="lng" (idle)="mapIdle()">
<agm-marker *ngFor="let p of markers" [latitude]="p.lat" [longitude]="p.lng"></agm-marker>
</agm-map>
结论
如果您想查看完整示例,请下载示例项目:
https://github.com/xomena-so/so48865595
希望对您有所帮助!
我让它与 LatLngBounds()
函数一起工作。这是片段。
import {AgmInfoWindow, MapsAPILoader} from '@agm/core';
latlngBounds: any;
// fits the map to the bounds
if (this.points.length.) {
this.mapsAPILoader.load().then(() => {
this.latlngBounds = new window['google'].maps.LatLngBounds();
_.each(this.points, location => {
this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng));
});
}
);
}
@renil-babu
不必在 mapReady
上执行 fitBounds
,您必须在添加标记订阅块中执行此操作
const bounds: LatLngBounds = new google.maps.LatLngBounds();
for (const mm of this.markers) {
bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
}
// @ts-ignore
this.agmMap._mapsWrapper.fitBounds(bounds);
自 2018 年 9 月起有 AgmFitBounds
指令。超级简单。
<agm-map
style="width:100vw; height:100vh;"
[fitBounds]="true">
<agm-marker
*ngFor="let location of locations"
[latitude]="location.latitude"
[longitude]="location.longitude"
[agmFitBounds]="true"></agm-marker>
</agm-map>
如果您出于某种原因不使用 agm-marker(您使用 html 标记,就像我一样)那么您的组件可能不支持 agmFitBounds 访问器。为了使其工作,请编写实现 FitBoundsAccessor 的自定义组件:
import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FitBoundsAccessor, FitBoundsDetails } from '@agm/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Component({
selector: 'guide-map-bounds',
template: `<ng-content></ng-content>`,
providers: [{ provide: FitBoundsAccessor, useExisting: forwardRef(() => MapBoundsComponent) }],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapBoundsComponent implements FitBoundsAccessor, OnChanges {
@Input() latitude: number;
@Input() longitude: number;
private fitBoundsDetails$ = new BehaviorSubject<FitBoundsDetails>(null);
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
const latLng: google.maps.LatLngLiteral = { lat: this.latitude, lng: this.longitude };
this.fitBoundsDetails$.next({ latLng });
}
getFitBoundsDetails$(): Observable<FitBoundsDetails> {
return this.fitBoundsDetails$.asObservable();
}
}
然后在你的 html 里面 agm-map
<guide-map-bounds [agmFitBounds]="true" *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lon">
<agm-html-overlay [latitude]="marker.lat" [longitude]="marker.lon">
<div class="marker" >
</div>
</agm-html-overlay>
</guide-map-bounds>
请注意 agm-html-overlay 是不支持 agmFitBounds 的自定义组件
<agm-map #agmap
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
[fitBounds]="true">
<agm-marker [agmFitBounds]="true" [latitude]="curretAddLat" [longitude]="curretAddLng"></agm-marker>
</agm-map>
***Above code will help you with AGM MAP.
我正在为我的 angular 4 应用程序使用 AGM maps,但我遇到了问题,我将从 api 获取的多个标记作为 Latitude 数组和经度。我想将缩放级别设置为完全覆盖地图上的所有标记。即使一个国家的一个标记和另一个国家的另一个标记,它也应该在加载时设置缩放级别以显示地图上的所有标记。 有没有办法在 AGM angular 地图中做到这一点?谁能帮帮我
目标
我们想设置 AGM 地图的缩放级别以显示地图上的所有标记。通常在 Google 地图 JavaScript API 中,您使用 google.maps.Map class 的 fitBounds()
方法来实现此目的。
https://developers.google.com/maps/documentation/javascript/reference/3/map
因此,我们必须获取地图对象的实例(JavaScript API 实例)并在其上应用 fitBounds()
。
解决方案
我创建了一个简单的例子,它有一个模拟服务,为 5 个标记提供 JSON 数据,并使用 AGM 地图绘制地图和标记。在此示例中,我使用@ViewChild 装饰器来获取 AGM 地图的实例并监听 mapReady
事件以获取地图对象的实例(来自 JavaScript API)。获得地图实例后,我可以轻松地创建 LatLngBounds 对象并在地图对象上调用 fitBounds()
。看看 app.component.ts 中的 ngAfterViewInit()
方法来获得一个想法。
代码片段
app.component.ts
import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core';
import { MyMarker } from './marker';
import { MarkersService } from './markers.service';
import { GoogleMapsAPIWrapper, AgmMap, LatLngBounds, LatLngBoundsLiteral} from '@agm/core';
declare var google: any;
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, AfterViewInit {
title = 'AGM project (so48865595)';
lat = 41.399115;
lng = 2.160962;
markers: MyMarker[];
@ViewChild('AgmMap') agmMap: AgmMap;
constructor(private markersService: MarkersService) { }
ngOnInit() {
this.getMarkers();
}
ngAfterViewInit() {
console.log(this.agmMap);
this.agmMap.mapReady.subscribe(map => {
const bounds: LatLngBounds = new google.maps.LatLngBounds();
for (const mm of this.markers) {
bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
}
map.fitBounds(bounds);
});
}
getMarkers(): void {
this.markers = this.markersService.getMarkers();
}
mapIdle() {
console.log('idle');
}
}
app.component.html
<h1>{{ title }}</h1>
<!-- this creates a google map on the page with the given lat/lng from -->
<!-- the component as the initial center of the map: -->
<agm-map #AgmMap [latitude]="lat" [longitude]="lng" (idle)="mapIdle()">
<agm-marker *ngFor="let p of markers" [latitude]="p.lat" [longitude]="p.lng"></agm-marker>
</agm-map>
结论
如果您想查看完整示例,请下载示例项目:
https://github.com/xomena-so/so48865595
希望对您有所帮助!
我让它与 LatLngBounds()
函数一起工作。这是片段。
import {AgmInfoWindow, MapsAPILoader} from '@agm/core';
latlngBounds: any;
// fits the map to the bounds
if (this.points.length.) {
this.mapsAPILoader.load().then(() => {
this.latlngBounds = new window['google'].maps.LatLngBounds();
_.each(this.points, location => {
this.latlngBounds.extend(new window['google'].maps.LatLng(location.lat, location.lng));
});
}
);
}
@renil-babu
不必在 mapReady
上执行 fitBounds
,您必须在添加标记订阅块中执行此操作
const bounds: LatLngBounds = new google.maps.LatLngBounds();
for (const mm of this.markers) {
bounds.extend(new google.maps.LatLng(mm.lat, mm.lng));
}
// @ts-ignore
this.agmMap._mapsWrapper.fitBounds(bounds);
自 2018 年 9 月起有 AgmFitBounds
指令。超级简单。
<agm-map
style="width:100vw; height:100vh;"
[fitBounds]="true">
<agm-marker
*ngFor="let location of locations"
[latitude]="location.latitude"
[longitude]="location.longitude"
[agmFitBounds]="true"></agm-marker>
</agm-map>
如果您出于某种原因不使用 agm-marker(您使用 html 标记,就像我一样)那么您的组件可能不支持 agmFitBounds 访问器。为了使其工作,请编写实现 FitBoundsAccessor 的自定义组件:
import { ChangeDetectionStrategy, Component, forwardRef, Input, OnChanges, SimpleChanges } from '@angular/core';
import { FitBoundsAccessor, FitBoundsDetails } from '@agm/core';
import { BehaviorSubject, Observable } from 'rxjs';
@Component({
selector: 'guide-map-bounds',
template: `<ng-content></ng-content>`,
providers: [{ provide: FitBoundsAccessor, useExisting: forwardRef(() => MapBoundsComponent) }],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class MapBoundsComponent implements FitBoundsAccessor, OnChanges {
@Input() latitude: number;
@Input() longitude: number;
private fitBoundsDetails$ = new BehaviorSubject<FitBoundsDetails>(null);
constructor() { }
ngOnChanges(changes: SimpleChanges): void {
const latLng: google.maps.LatLngLiteral = { lat: this.latitude, lng: this.longitude };
this.fitBoundsDetails$.next({ latLng });
}
getFitBoundsDetails$(): Observable<FitBoundsDetails> {
return this.fitBoundsDetails$.asObservable();
}
}
然后在你的 html 里面 agm-map
<guide-map-bounds [agmFitBounds]="true" *ngFor="let marker of markers" [latitude]="marker.lat" [longitude]="marker.lon">
<agm-html-overlay [latitude]="marker.lat" [longitude]="marker.lon">
<div class="marker" >
</div>
</agm-html-overlay>
</guide-map-bounds>
请注意 agm-html-overlay 是不支持 agmFitBounds 的自定义组件
<agm-map #agmap
[zoom]="zoom"
[disableDefaultUI]="false"
[zoomControl]="false"
[fitBounds]="true">
<agm-marker [agmFitBounds]="true" [latitude]="curretAddLat" [longitude]="curretAddLng"></agm-marker>
</agm-map>
***Above code will help you with AGM MAP.