Я использую Angular 2 для своего проекта. Я хотел бы знать, как добавить метку к маркеру с помощью угловых карт Google. Я не получаю решения для добавления метки с помощью Angular 2. Ниже мой html-код. Я получаю места с помощью ngFor. Мне нужно пометить объект имени маркером. Обычно, когда я наводю курсор на маркер, он должен показывать это имя.
<div class = "form-group">
<input placeholder = "search for location" autocorrect = "off" autocapitalize = "off"
spellcheck = "off" type = "text" class = "form-control" #search [formControl] = "searchControl">
</div>
<agm-map style = "height: 600px" [latitude] = "latitude" [longitude] = "longitude">
<agm-marker *ngFor = "let m of mapArrayList; let i = index"
[latitude] = "m.latitude"
[longitude] = "m.longitude"
label = "m"
(markerClick) = "clickedMarker(m.id)"
>
</agm-marker>
</agm-map>
mapArrayList:
0:
address: XYZ
name: ABC services Lts
ngOnInit() {
this.latitude = 1.372611;
this.longitude = 103.848076;
this.mapArrayList = this.facilityListArray;
console.info(this.mapArrayList);
// set google maps defaults
this.zoom = 40;
// create search FormControl
this.searchControl = new FormControl();
// set current position
this.setCurrentPosition();
// load Places Autocomplete
this.mapsAPILoader.load().then(() => {
const autocomplete = new google.maps.places.Autocomplete(this.searchElementRef.nativeElement, {
componentRestrictions: {country: ['SG', 'IN']}
});
autocomplete.addListener('place_changed', () => {
this.ngZone.run(() => {
// get the place result
const place: google.maps.places.PlaceResult = autocomplete.getPlace();
// verify result
if (place.geometry === undefined || place.geometry === null) {
window.alert('No details available for input: \'' + place.name + '\'');
return;
}
// set latitude, longitude and zoom
this.latitude = place.geometry.location.lat();
this.longitude = place.geometry.location.lng();
this.zoom = 100;
});
});
});
}





Вы можете предоставить такой ярлык ...
<agm-map style = "height: 600px" [latitude] = "latitude" [longitude] = "longitude">
<agm-marker *ngFor = "let m of mapArrayList; let i = index"
[latitude] = "m.latitude"
[longitude] = "m.longitude"
[label] = "m.label"
(markerClick) = "clickedMarker(m.id)"
>
</agm-marker>
</agm-map>
Где переменная m.label имеет строковое значение - обычно один символ в верхнем регистре. (хотя вы можете использовать любое строковое значение)
Вместо строкового значения вы также можете использовать значение типа MarkerLabel для предоставления более подробной информации, если вам это нравится. Ниже представлена структура интерфейса MarkerLabel.
interface MarkerLabel {
color: string;
fontFamily: string;
fontSize: string;
fontWeight: string;
text: string;
}
@Nancy - Помогает ли это в решении вашей проблемы?