Найдите уровни масштабирования, которые соответствуют третьей ближайшей точке к пользователю

Для приложения, которое я разрабатываю, требуется карта, масштабируемая так, чтобы на ней были отмечены три ближайшие к пользователю станции. Для этого мне нужно определить расстояние между пользователем и станцией, наиболее удаленной от пользователя. Затем мне нужно увеличить карту, чтобы включить самую дальнюю станцию ​​с пользователем в центре. Я знаю, как центрировать пользователя на карте или как установить уровень масштабирования и выполнить центрирование < / а>. Я также немного узнал об уровнях масштабирования. Однако, похоже, я не могу объединить все это для достижения своей цели. Может ли кто-нибудь просветить меня в этом направлении?


person Sandah Aung    schedule 15.04.2015    source источник


Ответы (2)


1) Перебирайтесь между вашими точками и найдите расстояние до вашего текущего местоположения.

2) Найдите три ближайшие точки.

3) Создайте привязку в картах Google, например:

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

4) Продлите эту границу для всех трех точек.

bounds.extend(myLatLngPoint);

5) Подходящие границы:

map.fitBounds(bounds);

Сообщите мне, если у вас возникнут проблемы с какой-либо точкой.

person ericpap    schedule 15.04.2015

Извините за копание, но я хотел бы сделать ответ @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>
person Orestis Zekai    schedule 11.07.2019