Question

我在我的应用程序中添加了一个传单Map，我想使用数据库中的数据向它添加一个Marker。当我手动尝试它时，它工作，但当我尝试从数据库中获取数据时，我得到这两个错误：无法读取属性＆＃39;推送＆＃39;未定义的和错误类型错误：无法读取属性＆＃39;过滤器＆＃39;未定义的我在这个plunker中分享我的代码我的map.component.ts

＆＃13;

import { MapService } from './../services/map.service';
import { park } from './../park';
import { ParkService } from './../services/park.service';
import { MessageService } from './../services/message.service';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
import { Router } from '@angular/router';
import { Component, NgZone, Injector, ApplicationRef, ComponentFactoryResolver, OnInit, EventEmitter } from '@angular/core';

import { icon, latLng, Layer, Map, marker, Marker, point, polyline, tileLayer } from 'leaflet';
import * as L from 'leaflet';




@Component({
  selector: 'map',
  templateUrl: './map.component.html',
  styleUrls: ['./map.component.css']
})
export class MapComponent implements OnInit {
  public homeChanged: EventEmitter<boolean> = new EventEmitter<boolean>();

   
  constructor(private router: Router,
    private _parkService: ParkService,
    private messageService: MessageService,
    private maps : MapService,
    private modalService: NgbModal,
    private zone: NgZone
  ) {

  }
  parks:park;


  ngOnInit() {
    // S'exécute après la création du composant. C'est le meilleur endroit où on peut initialiser les propriétés.

    this.getAllParks();
   // this._stockService.showAllStores().subscribe(data => this.store.id = this.parks.Equipment);



  }
lt:number;
lg:number;

  googleMaps = tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}', {
    maxZoom: 20,
    subdomains: ['mt0', 'mt1', 'mt2', 'mt3'],
    detectRetina: true
  });

customCircleMarker = L.CircleMarker.extend({
  options: { 
     someCustomProperty: 'Custom data!',
     anotherCustomProperty: 'More data!'
  }
});
markers:Marker[];
markerData = [];
map:Map;

getAllParks() :  Marker[]{
  this._parkService
    .showAllParks()
    .subscribe(parks => {
      this.parks = parks;
      for(let park of parks)
      {
        this.lt = park.latitude ;
         this.lg = park.longitude;

      this.markerData=[this.lt, this.lg];

       for( var i =0 ; i< this.markerData.length; i++){
     this.markers.push(marker(this.markerData[i], { icon: this.createIcon() }))
      
  }


    }

   });
    return this.markers
}

//   markers: Marker[] = [
//     marker([ 35.80635, 10.6346 ], { icon: this.createIcon() }),
//     // marker([ 46, -121 ], { icon: this.createIcon() }),
//     // marker([ 47, -121 ], { icon: this.createIcon() }),
//     // marker([ 48, -121 ], { icon: this.createIcon() }),
//     // marker([ 49, -121 ], { icon: this.createIcon() })
//   ];
// lt:number;
// lg:number;
//   markerData: [number , number][]= [
    
//     [this.lt, this.lg],
//     [35.80635, 10.61376],
//     [35.8698, 10.5352]
//   ]

  // setMarkers():  Marker[]{
  //   for( var i =0 ; i< this.markerData.length; i++){
  //    this.markers.push(marker(this.markerData[i], { icon: this.createIcon() }))
      
  // }
  //   return this.markers;
  // }

  layers: Layer[] = [];


  options = {
    layers: [ this.googleMaps ],
    zoom: 11,
    center: latLng([ 35.8245, 10.61376 ])
  };
  


  createIcon() {
    return icon({
      iconSize: [ 25, 41 ],
      iconAnchor: [ 13, 41 ],
      iconUrl: 'assets/img/marker.png',

      //shadowUrl: 'assets/img/marker-shad.png'
    });
  }
  updateMarkers() {
    this.markers= this.getAllParks();
    this.zone.run(() => {
      this.layers = this.markers.filter((m: Marker) => this.map.getBounds().contains(m.getLatLng()));
    });
  }

  onMapReady(map: Map) {
    this.map = map;

    this.map.on('moveend', this.updateMarkers.bind(this));
    this.map.on('zoomend', this.updateMarkers.bind(this));

    this.updateMarkers();
  }
  addMarker() {
    var m = L.marker([35.80635, 10.61376]);
    m.bindTooltip('Angular 4 marker (PopupComponent)');
    m.bindPopup(null);
   
    //this.markersLayer.addLayer(m);
    return m;
}





}

＆＃13;

和我的map.component.html

＆＃13;

<div id="map"
leaflet
[leafletLayers]="layers"
(leafletMapReady)="onMapReady($event)"
(leafletMapReady)="($event)"
[leafletOptions]="options">
</div>

＆＃13;

Answer 1

push错误是因为您尚未初始化markers

markers:Marker[] = [];

filter错误也是因为这个错误，但它不是唯一的错误。您的getAllParks()方法正在进行异步工作，markers将在某个时间点之后才会设置，但是您要同步处理代码并立即返回markers。我的观点是，您拨打getAllParks()的电话不会让您从服务中回来的markers，而是在您拨打电话之前设置的markers。

问题是我们对您的用例了解不足，无法知道指向您的方向，以使您的代码与将出现的其他问题相关联。

如何在传单中添加标记映射angular4

1 个答案: