我正在尝试在我的 Angular 组件中显示 Leaflet Map
,该组件正在检索银行代理详细信息。
我收到此错误:
ERROR Error: Map container not found.
这是我的组件:
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 模板包含一个与机构名称和地址绑定(bind)的表单,我稍后要实现的是在 map 的坐标中显示一个标记。但是我一直找不到 Map 容器。
任何帮助,将不胜感激。
谢谢!
最佳答案
我通过放置 <div=map></div>
解决了我的问题出了<form></form>
关于angular - 未找到传单 map 容器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52449843/