有没有一种方法可以在AGM地图中设置边界和缩放级别? [英] Is there a way to set the bounds and Zoom level in AGM Map?

问题描述

我正在为我的angular 4应用程序使用 AGM地图，在那里我遇到了问题，我将遇到从api中获取的多个标记，这些标记是经度和纬度数组.我想将缩放级别设置为完全覆盖地图上的所有标记.即使一个国家/地区的一个标记也可能在其他国家/地区的另一个标记，也应设置加载时的缩放级别以在地图上显示所有标记. 有没有办法在AGM角度图中做到这一点?谁能帮我

I am using AGM maps for my angular 4 application, there I am facing issues, I will be having the multiple markers which are fetched from api as an array of Latitude and Longitude. I want to set the zoom level exactly covering all the markers on the map. Even if one marker in one country and other in some other country also, It should set the zoom level on load to show all the markers on the map. Is there a way to do that in AGM angular maps? Could anyone please help me

推荐答案

目标

我们想设置AGM地图的缩放级别，以显示地图上的所有标记.通常，在Google Maps JavaScript API中，您可以使用google.maps.Map类的fitBounds()方法来实现此目的.

Objectives

We would like to set a zoom level of AGM map to show all the markers on the map. Typically in Google Maps JavaScript API you use the fitBounds() method of the google.maps.Map class to achieve this.

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

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

So, we have to get instance of the map object (the JavaScript API instance) and apply fitBounds() on it.

我创建了一个简单的示例，其中包含一个模拟服务，该服务提供5个标记的JSON数据，并使用AGM映射绘制地图和标记.在此示例中，我使用@ViewChild装饰器获取AGM映射的实例，并侦听mapReady事件以获取映射对象的实例(来自JavaScript API).获取地图实例后，就可以轻松创建 LatLngBounds 对象和在地图对象上调用fitBounds().看看app.component.ts中的ngAfterViewInit()方法以了解一个想法.

I have created a simple example that has a mock service that provides JSON data for 5 markers and draws map and markers using AGM map. In this example I used @ViewChild decorator to get the instance of AGM map and listen the mapReady event to get instance of map object (from JavaScript API). Once I get map instance I can easily create LatLngBounds object and call fitBounds() on map object. Have a look at the ngAfterViewInit() method in the app.component.ts to get an idea.

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>

结论

如果您想查看完整的示例，请下载示例项目:

Conclusion

If you would like to check complete example please download the sample project:

https://github.com/xomena-so/so48865595

我希望这会有所帮助！

I hope this helps!

这篇关于有没有一种方法可以在AGM地图中设置边界和缩放级别?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！