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