Контейнер для листовок не найден - PullRequest
Новая
       12

Контейнер для листовок не найден

0 голосов
/ 21 сентября 2018

Я пытаюсь отобразить Leaflet Map в моем угловом компоненте, который получает реквизиты банковского агентства.

Я получаю эту ошибку:

Ошибка ОШИБКИ:Контейнер карты не найден.

Вот мой компонент: 

import { Component, OnInit, Input } from '@angular/core';
import { RestService } from '../providers/rest.service';
import { SnotifyService } from '../../../node_modules/ng-snotify';
import { NgForm } from '../../../node_modules/@angular/forms';
import { Router, ActivatedRoute } from '@angular/router';

declare let L;
@Component({
  selector: 'app-modify-bank',
  templateUrl: './modify-bank.component.html',
  styleUrls: ['./modify-bank.component.css']
})
export class ModifyBankComponent implements OnInit {
  bank:any;
  bank_id:string;
  latitude:Number;
  longitude:any;

  constructor(
    private restService :RestService,
    private snotifyService: SnotifyService,
    private router:Router,
    private activatedRoute: ActivatedRoute,
    ) { 
      this.activatedRoute.params
      .subscribe( params => {
        this.bank_id = params.bank_id;
        this.getBankByID(params.bank_id);
      })    
  }

  ngOnInit() {
    this.addMap()
  }

  getBankByID(bank_id:string){
    this.restService.getBankByID(bank_id).subscribe((data:any) => {
      this.bank = data.bank;
      console.log(this.bank);
    } , err => {
      console.log(err);
    });
  }

  addMap(){

    let map = L.map('map').setView([36.798854, 10.152786], 8);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);
    var Marker;
    map.on('click',(e) =>                                                                                                                                                         {
      let latlng = map.mouseEventToLatLng(e.originalEvent);

      console.log(latlng.lat + ', ' + latlng.lng);
      //remove previous markers
      if (Marker) {
        map.removeLayer(Marker);
      }
      // Add marker to map at click location; add popup window

      Marker = new L.marker(e.latlng, {
        draggable: true,
        icon: L.icon({
          iconSize: [ 25, 41 ],
          iconAnchor: [ 13, 41 ],
          iconUrl: 'assets/leaflet/images/marker-icon.png',
          shadowUrl: 'assets/leaflet/images/marker-shadow.png'
        }),
      }).addTo(map);
    });

  }




}

HTML-шаблон содержит форму для связи с названием и адресом агентства, чего я пытаюсь достичь позжена, отображает маркер в координатах карты. Но я продолжаю получать контейнер Map не найден. Любая помощь будет оценена. Спасибо!

1 Ответ

0 голосов
/ 23 сентября 2018

Я решил свою проблему, поместив <div=map></div> из <form></form>

...