删除angular2 +

Question

我正在尝试删除某个标记（当我点击它时，它会弹出一个信息窗口，然后我会有一个删除按钮，它将从地图中删除该标记）

即使我刷新页面，我也希望将这些标记保存在localstorage中以保持相同的位置。

问题是当我使用切片方法删除标记时;这个方法会将我的所有标记移动到一个位置，所以如果我要添加3个标记：Marker1，Marker2和Marker3，我想删除Marker 2，Marker3将代替Marker2位置（替换他）而我不会希望那件事发生。我希望所有标记保持在同一位置。

我也尝试过不删除标记但是为它赋予空值但是对于该选项会发生以下错误：

  

lat没有null属性

这是因为当我通过我的标记循环 * ngFor 时，一些标记将为空。

这是我的component.html：

<agm-map [latitude]="lat"
      [longitude]="lng"
       [zoom]='zoom'
       (mapClick)="onMapClicked($event)">

  <agm-marker  *ngFor="let m of markers; let i = index" 
           [visible]='m.visible'
          (markerClick)="onClick(m)"
          [latitude]="m.lat"
          [longitude]="m.lng"
          [markerDraggable]="m.draggable"
          (dragEnd)="markerDragEnd(m, $event)">

   <agm-info-window>

  <div class="eventText">
    <strong>{{m.name}}</strong>
  </div>

  <button class="btn btn-success btn-sm" 
   (click)="onDelete(m)">Delete</button>
   </agm-info-window>

  </agm-marker>

 </agm-map>

这是我的markerData.service.ts：

import { Injectable } from '@angular/core';
import { marker} from "./park.component";

@Injectable()
export class MarkerdataService {
markers: marker[] = [];

 constructor() { }
 getAllMarkers() {
 if (localStorage.getItem('markers') === null || 
   localStorage.getItem('markers') === undefined) {
   localStorage.setItem('markers', JSON.stringify(this.markers));
   return this.markers;
 }
 else {
   var markers = JSON.parse(localStorage.getItem('markers'));
   return markers;
 }

}

addMarker(newmarker: marker) {

 var markers = JSON.parse(localStorage.getItem('markers'));
 markers.push(newmarker);
 localStorage.setItem('markers', JSON.stringify(markers));

}


removeMarker(mark: marker) {

  var markers = JSON.parse(localStorage.getItem('markers'));
  markers.splice(markers.indexOf(mark),1);
  localStorage.setItem('markers', JSON.stringify(markers));
 }


}

这是我的component.ts：

export class ParkComponent {

 zoom: number = 10;
 lat: number = 44.458418;
 lng: number = 26.129007;
 private index:number = 0;
 private id:number = 0;
 markers: marker[] = [];

 constructor(private data: MarkerdataService){
   this.markers = this.data.getAllMarkers();
   console.log(this.markers);
   }

 ngOnInit(){}

 onClick(m: any) {
    console.log(m);
   }
 onMapClicked($event) {

   this.id++;
   this.index++;
   var newMarker:marker={
      id:this.id,
      name:'event: '+this.index,
      lat:$event.coords.lat,
      lng:$event.coords.lng,
      draggable:true
   }
   this.markers.push(newMarker);
   this.data.addMarker(newMarker);
  }
 onDelete(m:marker)
  {
   this.markers.splice(this.markers.indexOf(m),1);
   this.data.removeMarker(m);
  }

 }
export interface marker {
   id:number;
   name?:string;
   lat: number;
   lng: number;
   label?: string;
   draggable: boolean;
   visible?:boolean;
}

我到处搜索过，我找不到解决这个问题的方法。

感谢。