Question

我是Angular和Angular Map的新手，使用Google Maps Api的经验有限，因此，如果我在此处缺少明显的内容，我深表歉意。

我正在尝试在mouseOver上更改我的agm标记的iconUrl，以便我的蓝色图标切换为绿色图标。我没有运气，我得到的最大努力是在mouseOver上将所有图标更改为绿色。

这是我当前的map.component.html

<agm-marker *ngFor="let item of items; let i = index" [latitude]="item.lat"
 [longitude]="item.lng"
 [iconUrl]="{url: icon, origin: {x:0, y:-3}}"
 [label]="{text: item.amount | shorthandThousand: 1, color: '#FFFFFF', fontSize: '12px'}"
 (mouseOver)="mouseOver(item, i)"></agm-marker>

我尝试了多种选择来使它在我的component.ts中工作，我知道我需要使用索引，但是不知道怎么做。

这是我的map.component.ts

import { Listing } from'../../listing';
import { ListingService } from '../../listing.service';
@Component({selector: 'app-map',templateUrl: './map.component.html',styleUrls: ['./map.component.css']})
export class MapViewComponent implements OnInit {
listings: Listing[];
constructor(private listingService: ListingService) { }
// google maps zoom level
zoom: number = 14;
// Center Lat Lng
centerLat: number = 40.500598;
centerLng: number = -74.447142;
//Marker specific
zindex: number = 1;
iconBlue: string = '/img/map-icon-blue.svg';
iconGreen: string = '/img/map-icon-green.svg';
icon = this.iconBlue;
mouseOver(listing, i){
this.icon = this.iconGreen;
}
ngOnInit() {this.getListings();}
getListings(): void {
this.listingService.getListings()
.subscribe(listings => this.listings = listings);
}
}

在此先感谢您的帮助

Answer 1

要设置标记图标，您可以使用AgmMarker.iconUrl property，例如：

<agm-marker 
    *ngFor="let m of markers; let i = index"
    [latitude]="m.lat"
    [longitude]="m.lng"
    [label]="m.label"
    [iconUrl]="m.icon"
    (mouseOver)="mouseOver(m, i)">  
</agm-marker>


mouseOver(m: marker, i:number){
    m.icon = "https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png";
}

这里是the demo供您参考

鼠标悬停时agm-marker更改iconUrl

1 个答案: