如何以角度形式创建传单地图

问题描述

我的要求是以角度形式创建传单地图，但我对这个形式不熟悉

我知道如何将地图与普通 html 以角度方式集成，如下所示

ma​​p.component.ts

  ngOnInit() {
        const map = L.map('map').setView([51.509865,-0.118092],10);

        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',{
            attribution: '© OpenStreetMap contributors'
        }).addTo(map);
    }

ma​​p.component.html

<div id="map"></div>

ma​​p.component.css

div{
    height: 500px;
    width: 500px;
}

但是，现在我必须以角度形式放置传单地图，任何人都可以帮我解决这个问题

解决方法

您可以创建传单地图的自定义组件并在项目中的任何位置使用它：

LeafletMapComponent.html

<div class="col-md-12">
        <div id="map" leaflet
        [leafletOptions]="Options"
        (leafletMapReady)="onMapReady($event)" >
        </div>
</div>

LeafletMapComponent.css

#map {
  width: 100%;
  height: 300px;
  }

LeafletMapcomponent.ts

 constructor() { }
  map;
  @Input() markers;
  @Output() LMarkerclicked: EventEmitter<any> = new EventEmitter<any>();
  @Output() setPositon: EventEmitter<any> = new EventEmitter<any>();

  Options = {
    layers: [
      tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
    ],zoom: 7,center: latLng(29.6060218,52.5378041)
  };
 ngOnInit() {
  }
  onMapReady(map: L.Map) {
    setTimeout(() => {
      this.map = map;
      map.invalidateSize();
      this.addMarker();
    },0);
    map.on('click',(e)=>{this.onMapClick(e)});
  }
addMarker() {
    this.markers.forEach((mapMarker) => {
      let m = L.marker([mapMarker.lat,mapMarker.lng],{
        draggable: true,icon: new L.DivIcon({
          className: 'my-div-icon',html: '<img class="my-div-image" src="' + mapMarker.icon +'" />'+
                '<label class="MarkerLabel">'+ mapMarker.label +'</label>'
      })
      }).addTo(this.map).bindPopup("<b>" + mapMarker.info + "</b><br>" + mapMarker.label).on('click',this.markerClick,this).on('dragend',this.markerDragend,this);
    });
  }
  markerClick(e) {
    this.LMarkerclicked.emit(e.latlng);
  }
  markerDragend(e){
   this.LMarkerclicked.emit(e.target._latlng);
  }

然后使用它：

<app-leaflet-map [markers]="markers" (LMarkerclicked)="onClickLMarker($event)" (setPositon)="onClickLMarker($event)"></app-leaflet-map>

并在您的 ts 文件中：

markers: MapmarkerVm[] = [
  {
    lat: 29.60602,lng: 52.53780,label: '',draggable: true,icon: '../assets/images/marker-active.png',info: 'cityName'
  },];
onClickLMarker(e) {
  this.addEditForm.controls["Latitude"].reset(e.lat);
  this.addEditForm.controls["Longtude"].reset(e.lng);
}



   export class MapmarkerVm {
            lat: number;
            lng: number;
            label?: string;
            draggable: boolean;
            icon:string;
            info:String;
    }