组件.html:
<google-map (mapClick)="click($event)"
[center]="center" [options]="options" height="500px" width="100%"
[zoom]="zoom">
<map-marker (mapClick)="openInfoWindow(marker)" [clickable]="true"
*ngFor="let marker of markers" [position]="marker.position" [label]="marker.label"
[title]="marker.title" [options]="marker.options">
</map-marker>
<map-info-window>Info Window content</map-info-window>
</google-map>
组件.ts:options: google.maps.MapOptions = {
zoomControl: true,
scrollwheel: false,
disableDoubleClickZoom: true,
maxZoom: 15,
minZoom: 8,
}
我尝试在选项中添加带有 url 值的图标属性,在 map 标记中传递输入但没有任何效果https://github.com/angular/components/tree/master/src/google-maps#readme
最佳答案
至于 Angular 谷歌地图标记 ( https://github.com/angular/components/tree/master/src/google-maps/map-marker ) 文档,选项包括所有 map-marker
不是“便利输入”的对象属性:
...this component offers an options input as well as convenience inputs for position, title, label, and clickable, and supports all google.maps.Marker events as outputs.
因此,任何其他不是“方便输入”的属性都必须像这样在 JSON 对象中传递给数组上的每个标记对象:
const markers =[
{...},
{...},
[{
position:{
lat: 24.1 + ((Math.random() - 0.5) * 2) / 100,
lng: 0.2 + ((Math.random() - 0.5) * 2) / 100,
},
visible: true,
opacity: 0.6,
label: {
color: '#333',
text: 'My Label',
},
title: 'My Title',
options = {
draggable: false,
icon: '../assets/icons/MyMarker.png'
}
}],
{...},
{...}
];
或者,至少,这是在文档完成之前必须推断出来的。只需在您的组件上通过此代码并用所需数据填充省略号对象,或者只需从您自己的数据中创建一个具有此结构的数组。
关于angular - 如何在@angular/google-maps 模块中用自定义图标替换谷歌地图标记图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62691617/