Question

我正试图在我的角度组件中显示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模板包含一个与代理机构名称和地址绑定的表单，我稍后要实现的目的是在地图坐标中显示一个标记。但是我一直在找不到地图容器。任何帮助，将不胜感激。谢谢！

Answer 1

我通过将<div=map></div>放在<form></form>中来解决了我的问题

找不到传单地图容器

1 个答案: