angular - 在Angular 6中添加新标记时如何删除以前的标记?
问题描述
我的组件.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 文件中做错了,但无法找到我做错的地方。请帮助我如何解决这些问题。
解决方案
推荐阅读
- android - google play 应用程序被拒绝原因是漏洞意图重定向
- python - 带有时区信息的日期时间模块中的python timedelta计算
- google-cloud-platform - 谷歌云平台:基于命名的条件不起作用
- python - Python:使用来自多个文件的最大值列表创建一个文件
- php - 在 C++ 上使用 CURL 在 PHP 上获取 POST 值
- javascript - javascript for 循环如何在没有迭代的情况下检查语句
- mongodb - 无法在 docker 中运行 MongoDB 映像
- html - IMG 未在 Visual Studio 2019 中显示
- c++ - 用于重载解析的 C++ 普通结构类型
- c# - 你能帮助简化这个 linq 吗?