是否有一种方法可以在AGM地图中设置边界和缩放级别

我正在为我的Angular 4应用程序使用AGM地图，在那里我面临问题，我将拥有从API获取的多个标记作为一系列纬度和经度。我想设置缩放级别，以覆盖地图上的所有标记。即使在一个国家和另一个国家的另一个标记中也有一个标记，它也应将缩放级别设置在负载上，以显示地图上的所有标记。在AGM Angular图中有没有办法做到这一点？任何人都可以帮我

目标

我们想设置一个aGM地图的变焦级别，以显示地图上的所有标记。通常，在Google Maps JavaScript API中，您使用Google.maps.map类的fitBounds()方法来实现此目的。

https://developers.google.com/maps/documentation/javascript/reference/reference/3/map

因此，我们必须获取MAP对象的实例(JavaScript API实例(并在其上应用fitBounds()。

解决方案

我创建了一个简单的示例，该示例具有一个模拟服务，可为5个标记提供JSON数据，并使用AGM Map绘制地图和标记。在此示例中，我使用@ViewChild Decorator获取AGM Map的实例，然后收听mapReady事件以获取MAP对象的实例(来自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

我希望这会有所帮助！

自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>

@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);

目标众所周知，AGM地图允许fitbound到标记，而不是区域。基于上面接受的答案，我尝试使用this.agmMap.mapReady.subscribe，但是在最新版本中，我们没有AgmMap对象中的订阅或fitbound函数。

sollution 我找到了一种简单的方法，可以通过在区域边框中添加标记来使fitbound可用。即，我们知道一个区域是coordinates的组合，因此将任何区域的第一个和3个中间坐标添加为隐藏标记，仅此而已！

检查以下代码段，以了解我的工作方式。这是一个工作的测试代码。

代码段

<agm-map [zoom]="map_zoom" [fitBounds]="fit_bound" [disableDoubleClickZoom]="true" [latitude]="latitude" [longitude]="longitude">
  <span *ngFor="let mapData of list_map_geojsons">
     <agm-marker [iconUrl]="marker_icon" [latitude]="mapData.lat" [longitude]="mapData.lng" [agmFitBounds]="true"></agm-marker>
     <agm-data-layer  [geoJson]="mapData.geojson" [style]="mapData.colors"></agm-data-layer>
     <!--this is our magic code to make fitbound for zones -->
     <span *ngFor="let geoMarkers of mapData.geo_makrkers">
        <agm-marker [visible]="false" [latitude]="geoMarkers[1]" [longitude]="geoMarkers[0]" [agmFitBounds]="true"></agm-marker>
     </span>
     <!--magic code ends-->
  </span>

</agm-map>

import { AgmMap} from '@agm/core';
// My geojson
const parsed_json = JSON.parse(result.geojson);
/* ----------- This  code is wriitern for making fitbound to the zone,
 Keeping in mind that first and last co ordinates are same Here we take 
start mid, mid2 and mid3 of the zone coordinates and put it in the map 
as hidden markers so that fitbound will be available for the zone ------ */
let len = parsed_json.features[0].geometry.coordinates[0].length - 1;
let mid = Math.round(len / 2);
let mid2 = Math.round(mid / 2);
let mid3 = mid + mid2;
let geo_makrkers = [
  parsed_json.features[0].geometry.coordinates[0][0],
  parsed_json.features[0].geometry.coordinates[0][mid],
  parsed_json.features[0].geometry.coordinates[0][mid2],
  parsed_json.features[0].geometry.coordinates[0][mid3]
]
/* ---- End of zone fitbound -----*/
const map_data = {
  geojson: parsed_json,
  lat: latitude,
  lng: longitude,
  colors: map_colors,
  geo_makrkers: geo_makrkers
};

我让它与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));
          });
        }
      );
    }

如果由于某种原因不使用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-Roverlay是自定义组件，不支持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.

目标

解决方案

代码片段

结论

相关内容

最新更新

热门标签：