Как найти несколько маркеров? - PullRequest
Новая
       5

Как найти несколько маркеров?

0 голосов
/ 10 февраля 2020

Я пытаюсь найти способ использовать несколько маркеров на карте OSM. Несмотря на пугающее количество учебников, я не могу найти решение для восстановления информации (долготы, широты местоположений) в базе данных Firebase для создания маркеров. 

import * as L from 'leaflet';
import { ActivatedRoute } from '@angular/router';
import { LieuService, Lieu } from 'src/app/services/lieu.service';
import { AdresseService, Adresse } from 'src/app/services/adresse.service';
import { NavController, LoadingController } from '@ionic/angular';


@Component({
selector: 'app-carte',
templateUrl: './carte.page.html',
styleUrls: ['./carte.page.scss'],
})
export class CartePage implements OnInit {

name = 'Angular';
map: any;
myIcon: any;
resadd = [];

adresse: Adresse = {
  ville: '',
  cp: 0,
  latitude: 0,
  longitude: 0,
  numero: 0,
  rue: ''
};

lieu: Lieu = {
  adresse: this.adresse,
  nom: '',
  img: '',
  capacite: 0,
  jours_ouverts: []
};

public location: any = {
  Lat: 46.325666,
  Lon: -0.467819,
};

public locationMarker: any = {
  Lat: this.adresse.latitude,
  Lon: this.adresse.longitude,
  label: this.lieu.nom
};

constructor(private lieuService: LieuService,
            private adresseService: AdresseService) { }

ngOnInit() {
  this.initMap();
  // this.addMarker();
  console.log(this.adresse.latitude, this.adresse.longitude);
}

public initMap(): void {
  document.getElementById('map');
  const map = L.map('map', {
    center: [this.location.Lat, this.location.Lon],
    zoom: 13
  });

  const myIcon = L.icon({
    iconUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.2.0/images/marker-icon.png',
    iconSize: [25, 41],
    iconAnchor: [0, 40],
    popupAnchor: [-35, -39]
  });

  L.control.scale().addTo(map);

  L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(map);


  }
  // leafletMap() {
  //   for (const adresseService of this.resadd) {
  //     L.marker([this.resadd.longitude, resadd.latitude]).addTo(this.map)
  //       .bindPopup(this.adresse.id)
  //       .openPopup();

//   async addMarker() {
//       this.adresseService.getAdresse(this.adresse.id).subscribe(resadd => {
//         this.lieu.adresse = resadd;
//         console.log(this.lieu);
//         L.marker([resadd.longitude, resadd.latitude], {icon: this.myIcon})
//         .addTo(this.map)
//         .bindPopup(this.locationMarker.label)
//         .openPopup();
//       });
//  }
    //     L.marker([this.adresseService.getAdresse, this.locationMarker.Lat], {icon: this.myIcon})
    //     .addTo(this.map)
    //     .bindPopup(this.locationMarker.label)
    //     .openPopup();
    //   });
    // });

В комментариях приведены решения, которые я пробовал, что я думаю, не правильно на мой взгляд.

...