Как я могу установить новый Lat и Lng на клике с Leaflet? - PullRequest
0 голосов
/ 23 мая 2019

Я пытаюсь обновить координаты Leaflet, когда нажимаю на новое место. Я уже создал метод, который собирает всю информацию об этом выбранном месте, но я не знаю, как обновить его до карты.

Модель класса

export class Maps{
    id: number;
    address: {
        coordinates: {
            coordinates: {
                0: number,
                1: number
            }
        }        
    }
}

Карта-компонент.ts

export class MapsListComponent implements OnInit {

  maps: Maps[] = [];
  selectedMap: Maps;
  selectedLat;
  selectedLng;

Где взять все карты

getMaps(){
    this.userService.maps().subscribe(
      resMaps => {
        this.maps = resMaps.maps;
      });
   }

Выбранная карта

 onSelectMap(maps: Maps): void{
    this.selectedMap = maps;
    this.selectedLat = maps.address.coordinates.coordinates[0];
    this.selectedLng =  maps.address.coordinates.coordinates[1];  

    console.log(this.selectedMap)
    console.log(this.selectedLat)
    console.log(this.selectedLng)
  }

И я получаю все новые координаты на консоли, все из них.

Но нельзя установить параметры Leaflet LatLng

options = {
    layers: [
      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© OpenStreetMap contributors'
      })
    ],
    zoom:15,
    //I tried this but failed
    center: latLng(this.selectedLat, this.selectedLng)
  };

У вас, ребята, есть идея?

1 Ответ

0 голосов
/ 24 мая 2019

Я сделал это, просто изменил onSelectMap и добавил одну строку.

 onSelectMap(maps: Maps){
    this.selectedMap = maps;
    this.selectedLat = maps.address.coordinates.coordinates[0];
    this.selectedLng =  maps.address.coordinates.coordinates[1];  

    **this.map.panTo(new L.LatLng(this.selectedLat, this.selectedLng));**

    console.log(this.selectedMap)
    console.log(this.selectedLat)
    console.log(this.selectedLng)
  }

Добавлен этот метод тоже

onMapReady(map: L.Map) {
  this.map = map;
}

И HTML-файл

 <div id="map" leaflet [leafletOptions]="options" (leafletMapReady)="onMapReady($event)"></div>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...