在Angular 6中添加新标记时,如何删除以前的标记?

时间:2018-12-27 09:46:08

标签: angular

myComponent.ts

import { Component,NgZone,OnInit,ViewChild,ElementRef } from 
'@angular/core';
 import{Router} from'@angular/router';
 import {CommonUserService} from'../../../Auth/commonUserService.service';

import {FormBuilder, FormGroup, Validators} from '@angular/forms'
import { GoogleMapsAPIWrapper } from '@agm/core/services';
import { MapsAPILoader} from '@agm/core';
import { FormControl } from '@angular/forms';
declare var google: any;
@Component({
selector: 'contact-Information',
templateUrl: './contact.component.html',
providers:[GoogleMapsAPIWrapper]
})
export class ContactInformationComponent {

 @ViewChild('search')
 private SearchElementRef:ElementRef;
 public zoom:number;
 public latitude:number;
 public longitude:number;
 public latlongs:any= [];
 public latlong:any = {};
 map: any;
 public searchControl:FormControl;
 geocoder:any;
 constructor(public mapsApiLoader: MapsAPILoader,
          private ngzone: NgZone,
          private wrapper: GoogleMapsAPIWrapper,private 
   commonuserservice:CommonUserService,private 
formBuilder:FormBuilder,private router:Router) {
    this.zoom = 8;
   this.latitude = 39.8282;
   this.longitude = -98.5795;
   this.searchControl = new FormControl();

this.setCurrentPosition();

    this.mapsApiLoader.load().then(() => {
   const autocomplete = new 
   google.maps.places.Autocomplete(this.SearchElementRef.nativeElement,{
   types:[],
   componentRestrictions:{'country':'IN'}
    });
 autocomplete.addListener('place_changed',() =>{
   this.ngzone.run(()=>{
 const place:google.maps.places.PlaceResult= autocomplete.getPlace();
  if(place.geometry == undefined || place.geometry == null){
   return;
 }
const latlong = {
latitude : place.geometry.location.lat(),
longitude:place.geometry.location.lng()
 };

  this.latlongs.push(latlong);
  console.log("Lat and Long :");
  console.log(latlong);
  this.searchControl.reset(); // To reset the input text field
       });
      });
    });
   } 

private setCurrentPosition(){
if('geolocation' in navigator){
  navigator.geolocation.getCurrentPosition( (position) => {
    this.latitude = position.coords.latitude;
    this.longitude = position.coords.longitude;
    this.zoom = 8;
  });
}  
}

myComponet.html

    <div class="form-group">
      <label for="googleSearch"><h5>Search Location</h5></label>
      <input type="text"  class="form-control"  [formControl]="searchControl"
       id ="place" #search 
       autocomplete="off" 
       autocapitalize="off"
       spellcheck="off">
  </div>
    <agm-map [latitude]="latitude" [longitude]="longitude" [scrollwheel]="false" [zoom]="zoom" fit="true" icon="'icon'" style="height: 25%;">
      <agm-marker *ngFor="let xyz of latlongs" [latitude]="xyz.latitude" [longitude]="xyz.longitude"></agm-marker>
    </agm-map>

我的问题:             (1)添加新标记后如何删除以前的标记?             (2)更新时标记应显示在中心位置。 我认为我在component.ts文件中做错了什么,但找不到我做错的地方。请帮助我解决这些问题。

0 个答案:

没有答案