如何在@angular/google-maps 模块中用自定义图标替换谷歌地图标记图标

Question

component.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>

component.ts:

options: google.maps.MapOptions = {
    zoomControl: true,
    scrollwheel: false,
    disableDoubleClickZoom: true,
    maxZoom: 15,
    minZoom: 8,
  }

我尝试在选项中添加带有 url 值的图标属性，在地图标记中传递输入但没有任何效果

https://github.com/angular/components/tree/master/src/google-maps#readme

Answer 1

深入了解@angular/google-maps 的节点模块 我发现应该在地图标记的选项中设置图标。

 <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>

例如标记属性应该看起来像

     const markers = [{

        position:{
        lat: 27  + ((Math.random() - 0.5) * 2) / 10,
        lng: 80 + ((Math.random() - 0.5) * 2) / 10,
      },
        visible: false,
        opacity: 0.1,
        label: {
          color: 'black',
          text: 'Marker label ',
        },
        title: 'Marker title ',
        options: {
          animation: google.maps.Animation.DROP,
          icon: 'https://developers.google.com/maps/documentation/javascript/examples/full/images/beachflag.png'
        }
      }]

Answer 2

对于 Angular Google Maps Marker (https://github.com/angular/components/tree/master/src/google-maps/map-marker) 文档，选项包括所有 map-marker 不是“方便输入”的对象属性：

...这个组件提供了一个选项输入以及便利性 位置、标题、标签和可点击的输入，并支持所有 google.maps.Marker 事件作为输出。

所以任何其他不是“方便输入”的属性都必须像这样在 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'
        }
      }],
      {...},
      {...}
    ];

或者，至少，这是在文档完成之前必须推断出来的。

只需在您的组件上添加此代码，然后用所需数据填充省略号对象，或者仅使用您自己的数据创建具有此结构的数组。