Question

我正在开发的应用程序需要一个缩放的地图，以包括离用户最近的三个站点。为此，我需要找出用户和离用户最远的电台之间的距离。然后我需要缩放地图以包含最远的站点，用户位于中心。我知道how to centre the user in the map或how to set the zoom level and do the centring。我还学到了一点zoom levels。但是，我似乎无法将所有这些结合起来实现我的目标。任何人都可以在这个方向上启发我吗？

Answer 1

1）在你的积分之间迭代并找到你当前位置的距离。

2）找到最近的三个点。

3）在谷歌地图中创建一个绑定，如下所示：

var bounds = new google.maps.LatLngBounds();

4）扩展所有三个点的界限。

bounds.extend(myLatLngPoint);

5）适合界限：

map.fitBounds(bounds);

如果您有任何问题，请告诉我。

Answer 2

很抱歉，但是我想让@ericpap的答案更加优雅。您无需首先查找距离。准备好地图后，您可以在ngAfterViewInit中执行以下操作：

map.component.ts

import { Component, OnInit, ViewChild, AfterViewInit  } from '@angular/core';
import { AgmMap } from '@agm/core';

declare var google: any;

@Component({
  selector: 'app-map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit, AfterViewInit  {

  @ViewChild('AgmMap') agmMap: AgmMap;

  constructor() { }

  private agent1_lat = 40.940911;
  private agent1_lon = 26.317059;

  private agent2_lat = 40.942159;
  private agent2_lon = 26.319591;

  ngOnInit() {
    console.log('onInit')
  }

  ngAfterViewInit(){
    this.agmMap.mapReady.subscribe(map => {
        var bounds = new google.maps.LatLngBounds()
        bounds.extend(new google.maps.LatLng(this.agent1_lat, this.agent1_lon))
        bounds.extend(new google.maps.LatLng(this.agent2_lat, this.agent2_lon))

        map.fitBounds(bounds)
    })
  }

map.component.html

<agm-map #AgmMap [latitude]="lat" [longitude]="lon">
        <agm-marker [latitude]="agent1_lat" [longitude]="agent1_lon"></agm-marker>
        <agm-marker [latitude]="agent2_lat" [longitude]="agent2_lon"></agm-marker>
</agm-map>

查找缩放级别以适合用户的第三个最近点

2 个答案: